Less

Less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。

<div id="main">
  <div id="left"></div>
  <div id="right"></div>
</div>

嵌套

#main{background:red;
 #left{background:yellow;
   &:hover{background:gray;} /*** &的使用 ***/
   &.active{font-weight:700} /*** 只有在active前加上&才能实现 #left.active的效果 ***/
 }
 #right{background:green;}
}

变量

通过变量定义一系列通用样式，然后再其他地方调用该样式。作用：做全局样式。

@width:12;
@height:100px;
.border{
  width:@width*1px;
  height:@height;
}

@width:2px;
@style:solid;
@color:'red';
.box{
 border:@width @style @color;
}

作用域

.box{
 @a:10px; /*** 这边的a只能在.box起到作用，在.box外面是无反应的 ***/
}

混合

将一个定义好的classA样式引入另一个classB中，实现classB 继承 classA的所有属性

简单混合

.classA{border:1px solid red}
.left{
  .border;
}
.right{
 .border;
}

.clearFix{
 *zoom:1;
 &:after{
    content:'';display:block;clear:both;
 }
}
#main{
 .clearFix;
}

带参数混合

.border(@color){
  border:1px solid @color;
}
.left{
 .border(#ccc);
}
.right{
 .border(#b7b7b7);
}

带多参数混合

.border(@width,@color){
 border:@width solid @color
}
.left{
 .border(2px,#ccc);
}
.right{
 .border(1px,#b7b7b7);
}

带默认值的参数混合

.border(@width:1px,@style:solid,@color:red){
  border:@width solid #ccc;
}
.left{
  .border(1px,dotted);
}
.right{
 .border(3px)
}

arguments变量

arguments代表所有参数（适用于不在乎参数顺序的情形）

.border(@width:1px,@style:solid){
 border:@arguments #033333;
}

颜色操作函数

函数名	内容
lighten(@color,10%)	返回颜色比@color浅10%的颜色
darken(@color,10%)	……深
saturate(@color,10%)	……饱和比 深
desaturate(@color,10%)	……饱和比 浅
fadein(@color,10%)	……不透明10%
fadeout(@color,10%)	……透明10%
fade(@color,50%)	……透明度 50%
spin(@color,10)	……颜色比@color大10的色调
spin(@color,-10)	……颜色比@color小10的色调
mix(@color1,@color2)	……返回@color1和@color2的混合值