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!";

    目前学习了这些，以后使用过程中出现问题再补充。