初识less

LESS 高级特性

LESS 四大特性：变量、混合、嵌套、函数。

LESS 还拥有一些很有趣的特性有助于我们的开发，例如模式匹配、条件表达式、命名空间和作用域，以及 JavaScript 赋值等等。

混合实例：

.button {

 border-radius: 6px;

 -moz-border-radius: 6px;

 -webkit-border-radius: 6px;

}

.button2 {

 border-radius: 3px;

 -moz-border-radius: 3px;

 -webkit-border-radius: 3px;

}

这样我们可以通过传入参数的值，以及传入不同的参数个数能够选择不同的混入及改变它的最终代码。在 LESS 中定义参数是可以用常量的！模式匹配时匹配的方式也会发生相应的变化：

变量实例：

.mixin (dark, @color) {

 color: darken(@color, 10%);

}

.mixin (light, @color) {

 color: lighten(@color, 10%);

}

.mixin (@zzz, @color) {

 display: block;

 weight: @zzz;

}

 

.header{

   .mixin(dark, red);

}

.footer{

   .mixin(light, blue);

}

.body{

   .mixin(none, blue);

当我们定义的是变量参数时，因为 LESS 中对变量并没有类型的概念，所以它只会根据参数的个数来选择相应的混入来替换。而定义常量参数就不同了，这时候不仅参数的个数要对应的上，而且常量参数的值和调用时的值也要一样才会匹配的上。

函数实例：

.header {

 color: #cc0000;

 display: block;

 weight: dark;

}

.footer {

 color: #3333ff;

 display: block;

 weight: light;

}

.body {

 display: block;

 weight: none;

}

这样在我们的less中就可以使用.less来调用其中的混合常量和变量。。。
使用伪类时使用&符号表示其作用域，例如：

.body {

　& :hover{background-color: black; }

 display: block;

 weight: none;

}

这就使body拥有了伪类的效果！