LESS

• 扩展文件名的格式是 xxx.less

LESS使用

方法一：

<script src="less.js"...> 这种方式编译less

方法二：

//安装less
npm install -g less

变量

@变量名:值
@width：100px;
.box{
    width:@width;
}

混合

定义classa 然后可以将classa引入到classb中
.classa(a){
    width:@width;
}

.classb{
    .classa(a);
}

嵌套规则

父级{
    子集
}

函数和运算

可以将值计算
@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%);
}