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

最新推荐文章于 2024-09-11 16:08:52 发布

weixin_30485379

最新推荐文章于 2024-09-11 16:08:52 发布

阅读量325

点赞数

原文链接：http://www.cnblogs.com/wujianbufengsao/articles/6835967.html

版权

详细介绍：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; //变量赋给变量