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.变量名时延时加载的，在使用后定义也不影响。