跟我一起了解less（2）：变量和引用
语法：定义和引用都使用@的前缀
切入正题直接例举用法（截图是解析后的结果）
//用法一：一般变量赋值
@w:50px;
@h:50;
@p:height;
.box1 {
width:@w - 10; //运算符和变量间一定要留空格
@p:@h;
}
//用法二：选择器、字符串、属性的连接需要用大括号
@selector:box-part2;
@p:color;
.@{selector} {
width:50px;
height:50px;
background-@{p}:#FFBB77; //属性连接变量
}
@common:box;
.@{common}-part3 { //选择器连接变量
width:50px;
height:50px;
border:1px solid;
border-@{p}:#FFCC77;
}
@str1:"box-part4"; //字符串连接变量
@import "./example-2-@{str1}.less"; //用import可以引入另一个less文件，该文件可以配置共同参数变量
| //这是文件:example-2-box-part4.less @str2:"./logo"; .box-part4 { width:50px; height:50px; background-image:url("@{str2}-transparent.png"); } |
//用法三：变量的引用和赋值
@name:"my name is chalk";
.box-part5:before {
content:@@str3; //通过字符串来引用变量
width:@w;
height:@h;
}
@str3:"name"; //预处理：变量可以先使用后赋值
@w:50px;
@h:@w; //变量赋给变量
通过上面三组例子简单的总结less的变量有以下几个特性：
1、用@来声明或使用变量，选择器除外
2、用变量连接组合时，变量要加上{}，选择器在单独使用变量也要加上{}
3、变量可以通过字符串来引用
4、变量可以先用后赋值
to be continue......
