跟我一起了解less（2）：变量和引用

详细介绍：http://lesscss.cn/usage/ 

 

语法：定义和引用都使用@的前缀

切入正题直接例举用法（截图是解析后的结果）

 

//用法一：一般变量赋值
@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......

 

转载于:https://www.cnblogs.com/wujianbufengsao/articles/6835967.html