less基础

Less 是一门 CSS 预处理语言，使用了类似CSS的语法，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。简单来说：用类似JS的语法去写CSS。

• 变量

图 1

<h1>LESS is more, than css</h1>

如果用css直接写样式：

h1{
  color: blue;
  font-size: 80px;
}

在这段代码中h1的颜色和字体大小的值是可以变化的，可以类比JS中的变量，将blue的值赋予一个新定义的变量。在less中，定义变量用@加上变量名，将上面代码用less编写：

@color: blue;
@fontSize: 80px;
h1{
  color:@color;
  font-size: @fontSize;
}

• 嵌套

<div class="box">
    <div></div>
    <div></div>
</div>

在less中，写样式可以进行嵌套：

@width: 200px;
@height: 100px;
.box{
    div{
      width: @width;
      height: @height;
      background-color: @color;
    }
}

• 运算

图 2

和js一样，less也可以进行运算

@color: blue;
@subColor: red;
@width: 200px;
@height: 100px;
.box{
    div{
      width: @width;
      height: @height;
      background-color: @color;
    }
}
.box div:last-child{
    width: @width + 100;  // 300px
    height: @height - 50;  // 50px
    background-color: @subColor;
}

• 混合（Mixins）

图 3

Mixins类比于js中函数，以 . 加上混合名称开始，

.rotate(@rotate: 60deg){
    transform: rotate(@rotate);
}
.box div:last-child{
    .rotate(10deg);
}

此处不考虑浏览器兼容性，在调用.rotate时传不传参都可以。

最后传送门：
LESS官网：http://lesscss.org/
LESS中文网 ： http://www.lesscss.cn/