less快速入门------变量学习

一，什么是less变量？

1.less作为css的预处理器，和其他编程一样，有变量的概念。

二，less如何定义变量？

1.less定义变量的方式 : 使用符号@ 例如

@blue:#5B83AD; @mySelector:width; @commonFontSize:16px;

2.注意事项： @之后的变量名随意自取 使用：为变量赋值，不是使用= 赋的值不用加""或' '

三，less变量的使用

1.作为普通的属性值

@fontS:10px; .content{ font-size:@fontS }

2.作为选择器

xxx.html <div class='helloless' > </div> xxx.less @asSelector:helloless .@{asSelector}{ width:50%; }

3.作为css属性

@asProperty:width div{ @{asProperty}:100px; }

4.作为url

@myUrl:"http://class.imooc.com/static/module/index/img"; body{ background:#ccc url("@{myUrl}/nav.png") no-repeat; }

5.注意除了作为普通的属性值，其他在使用时形式为@{变量名}

6.变量名时延时加载的，在使用后定义也不影响。