less

less：css预编译

• 变量

@color: #4D926F;   //方便，容易修改，批量#header {    color: @color;   //注意格式}h2 {    color: @color;}

如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用。这与CSS的机制类似，最后一次定义的值会成为这个属性的值。

@var: 0;.class1 {    @var: 1;    .class {        @var: 2;        three: @var;        @var: 3;    }    one: @var;}//被编译成.class1 .class {    three: 3;}.class1 {    one: 1;}

变量提升，可以先声明后使用。也即按需求加载。

lazy-eval {    width: @var;}@var: @a;@a: 9%;

• 混合
  混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

.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;         //默认@radius变量为5px}#footer {    .rounded-corners(10px);  //覆盖，设置@radius变量为10px}

可以定义不带参数属性集合，不让它暴露到 CSS 中去，还可以在其他的属性集合中引用，你会发现这个方法非常的好用：

.wrap () {    text-wrap: wrap;    white-space: pre-wrap;    white-space: -moz-pre-wrap;    word-wrap: break-word;}pre { .wrap }

如果需要在 mixin 中不限制参数的数量，可以在变量名后添加 …，表示这里可以使用 N 个参数。

.mixin (@a, @rest...) {    // @rest 表示 @a 之后的参数    // @arguments 表示所有参数}

!important关键字，在混合后面加此关键字，也就是important关键字的意思。

多参数混合略复杂

• 模式匹配
  模式匹配：通过参数值控制混合的行为。

.mixin (dark, @color) {    color: darken(@color, 10%);}.mixin (light, @color) {    color: lighten(@color, 10%);}.mixin (@_, @color) {    display: block;}//调用mixin@switch: light;.class {    .mixin(@switch, #888);}

也可以根据参数的数量进行匹配

.mixin (@a) {    color: @a;}.mixin (@a, @b) {    color: fade(@a, @b);}

调用 .mixin 时，如果使用了一个参数，输出第一个 .mixin，使用了两个参数，则输出第二个。

• Guards
  Guards 被用来匹配表达式 (expressions)

.mixin (@a) when (lightness(@a) >= 50%) {    background-color: black;}.mixin (@a) when (lightness(@a) < 50%) {    background-color: white;}.mixin (@a) {    color: @a;           //公用的css属性}.class1 { .mixin(#ddd) }      // background-color: black;color: #ddd;.class2 { .mixin(#555) }      // background-color: white;color: #555;

Guards 支持的运算符包括：> >= = =< <；还可以使用可以使用 is* 函数。

几个检查基本类型的函数：

iscolor
isnumber
isstring
iskeyword
isurl
如果需要检查一个值（数字）使用了哪个单位，可以使用下面三个函数：

ispixel
ispercentage
isem

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }  //可以使用逻辑and 或not

• @arguments参数
  @arguments参数包含了所有传递进来的参数。在做兼容性的时候比较好用。

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {    box-shadow: @arguments;            //2px 5px 1px #000;    -moz-box-shadow: @arguments;    -webkit-box-shadow: @arguments;}.box-shadow(2px, 5px);

• 选择器嵌套
  在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

#header {    h1 {                      //#header h1        font-size: 26px;        font-weight: bold;    }    p {                       //#header p        font-size: 12px;        a {                   //#header p a            text-decoration: none;            &:hover {         //#header p a:hover                border-width: 1px            }        }    }}

嵌套中注意使用&符号：如果你想写串联选择器，而不是写后代选择器，就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。

• 函数和运算

可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

@the-border: 1px;@base-color: #111;@red:        #842210;#header {    color: (@base-color * 3);    border-left: @the-border;    border-right: (@the-border * 2);}#footer {    color: (@base-color + #003300);    border-color: desaturate(@red, 10%);}

• 命名空间
  为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，你可以像下面这样在 #bundle 中定义一些属性集之后可以重复使用：

#bundle {    .button () {        display: block;        border: 1px solid black;        background-color: grey;        &:hover { background-color: white }    }    .tab { ... }    .citation { ... }}//使用时，如下引用.button#header a {    color: orange;    #bundle > .button;}

• 作用域
  类似js,现在本地查找变量，没找到再去父级找。

• 注释
  /**/：可以使用，并且解析出的css文件中显示
  //：也可以使用，但在解析出的css文件中不显示

• 导入（Import）
  在less文件中既可以导入css文件，也可以导入less文件。区别是，导入css文件不编译，导入less文件会编译。

编译过程中，对导入CSS文件只做一处处理：将导入的语句提到最前，紧跟在@charset之后。