LESS 学习整理总结
在学习LESS之前，先了解是如何作用的。 LESS可以运行在NodeJS 浏览器等平台上，有许多第三方工具可以编译LESS，推荐使用SimpLESS，这一直接吧LESS文件编程成为CSS文件，快捷方便。 LESS是一门CSS预处理语言，它扩充了CSS语言，增加了变量，混合（MIxin），函数等功能，让CSS从一行行的描述变成了可编译，使其维护成本更低更方便。 LESS的学习成本也很低，只要熟悉CSS语言以及有编程基础，即可轻松上手。
编写的文件的扩展名为.less。
1.导入 LESS可以导入.less文件，示例如下：
@import "lessName";
2.变量 通过@变量名的方式声明变量。
2.1 一般值变量
@link-color:red; //此处声明
.class{ color:@link-color; //此处使用
}
2.2 选择符变量
@mySelector:banner;
.@{mySelector}{ /* some CSS */ }
等于
.banner{ /* some CSS */ }
2.3 URL变量
@images:"../image";
.class{ background-image:url("@{images}/aa.jpg"); }
2.4 属性变量
@property:color;
.class{ background-@{property}:red; }
2.5 变量名
@name1:"somesome";
@name2;"name1";
content:@@name2;==content:"somesome";
3 混合 mixin
什么是混合，就是声明了一个选择符的属性之后，可以通过调用选择符的方式调用这个选择符中的属性；
.class1{ color:red; }
.class2{ .class1;//也可使用.class1(); }
class2的CSS就等于
.class2{ color:red; }
3.1 如果不希望mixin被输出，在其后边加一个括弧即可；
.class1{ color:red; }
.class2(){ //注意后边带有括弧
background-color:white;
}
.class3{ .class1; .class2; }
实际输出为：
.class1{ color:red; }
.class3{
color:red; background-color:white;
} //注意没有class2了
3.2 mixin中还可以包括选择符
.class1{ &:hover{ content:"hello"; } }
.class2{ .class1; }
实际输出为：
.class2:hover{ content:"hello"; }
3.3 带参数的mixin(多个参数之间使用分号间隔，可以设置默认值)
.border-radius(@radius){
-webkit-border-radius：@radius;
-moz-border-radius：@radius;
border-radius：@radius;
}
.class1{ .border-radius(6px); }
实际输出为：
.class1{
-webkit-border-radius：6px;
-moz-border-radius：6px;
border-radius：6px;
}
.class1(@color:#232323;@ff:90px){};
3.4 @arguments 表示所有参数的集合
.box-shadow(@x:0;@y:0;@blur:1px;@color:#000){
-webkit-box-shadow:@arguments;
-moz-box-shadow:@arguments;
box-shadow:@arguments; };
.class1{ .box-shadow(3px;4px;4px;red);
}
3.6 Mixin还可以作为函数使用
.mixin(){ @width:100px; @height:100px; }
.class1{ .mixin(); width:@width; height:@height; }
3.7 mixin作为循环。
4 函数
内置函数部分
4.1 color() 将代表颜色的值转为字符串 color("#aaa"),返回值为 #aaa 这是一个颜色值;
4.2 convert() 转换数值单位 支持的单位有 m,cm mm in pt pc s ms rad deg grad turn等 函数有两个参数 第一个是带有单位的浮点数 第二个是要转成的单位。 convert(12cm,"mm") ==>120mm
等等还有很多比较强大的函数。