标签：
Less is more, than CSS. Less有点类似与jq, 是css的一个库。
less是一种动态样式语言，属于CSS预处理语言的一种，使用类似于CSS的语法，为CSS赋予了动态语言特性，如变量、继承、运算、函数等，方便CSS的编写和维护。
一、变量
通过@定义变量（如php的$ ?）,可以在设置属性值时，直接调用变量。
@width:300px;
二、混合
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。(
也可以不加参数，直接调用对应的CSS属性)
例子：
//通过定义这个类来解决兼容问题
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners; //无参数调用，为默认值5px
}
#footer {
.rounded-corners(10px); //有参数调用，@radius为10px
}
三、嵌套
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
例子：
#header {
//h1, p 同级 a被p嵌套
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover { //&符号 代指上一层标签 此处为a
border-width: 1px
}
}
}
}
四、常识点
1、!important关键字：调用时在混合后面加上!important关键字表示将混合带来的所有属性标记为!important 。
2、可以使用css中的注释 /* */，也可以使用//， 使用//在编译时会被自动过滤。
3、可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:
@import "lib.less";
五、匹配模式
作用有点类似于
.triangle(top, @a:xx , @b:xx){
//属性设置
}
.triangle(bottom, @a:xx , @b:xx){
//属性设置
}
.triangle(@_, @a:xx , @b:xx){
//属性设置(每个匹配项共有)
}
//使用
.abc{
.triangle(top); //选择第一个参数为top的匹配项 （含有@_的内容）
.triangle(bottom); //选择第一个参数为bottom的匹配项（含有@_的内容）
}
六、函数和运算
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。
// LESS
@the-border: 1px; /* 生成的 CSS */
@base-color: #111; #header {
@red: #842210; color: #333;
#header { border-left: 1px;
color: @base-color * 3; border-right: 2px;
border-left: @the-border; }
border-right: @the-border * 2; #footer {
} color: #114411;
#footer { border-color: #7d2717;
color: @base-color + #003300; }
border-color: desaturate(@red, 10%);
}
七、避免编译
有时候会输出一些不符合规定的CSS语句，或者LESS无法编译的语句。这时候在语句前面加上~符号，并将语句用引号包裹。
例子：
.class{
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
编译后：
.class{
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
八、JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:
例子：
@var: `"hello".toUpperCase() + ‘!‘`;
输出：@var: "HELLO!";
目前学习了这些，以后使用过程中出现问题再补充。
标签：
原文地址：http://www.cnblogs.com/bxddy/p/5793188.html
