less入门

Less 是 CSS 的一种形式的扩展，在现有的 CSS 语法上，添加了很多额外的功能，学习Less可以大大提高效率！

1.变量
Less的一个主要功能是让你可以像在js中一样声明变量，你可以将公用的值存储在变量中(请注意Less中的变量为常量，只能定义一次)

@backgorud:#fff;
@font-color:#000;

div{
  background:@backgorud;
  color:font-color;
}

解析如下所示

div{
   background:#fff;
   colo:#000;
}

2.混入
在Less中我们可以定义通用的样式为一个class或者id集合，然后在其它的地方去调用它们

.header{
  font-size:16px;
  color:#fff;
}
#footer{
  background:red;
  display:flex
}
.context{
  height:100px;
  .header
  #footer
}

解析如下所示

.header{
  font-size:16px;
  color:#fff;
}
#footer{
  background:red;
  display:flex
}
.context{
  height:100px;
  font-size:16px;
  color:#fff;
  background:red;
  display:flex
}

3.带参数混合

.item(@size:20px){
  height:@size;
  width:@size;
}
.list-one{
  .item
}
.list-two{
  .item(100px)
}

解析如下所示

.list-one{
  height:20px;
  width:20px;
}
.list-two{
  height:100px;
  width:100px;
}

与js中一样，函数中也存在arguments，用@arguments表示，表示参数集合

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000){
  box-shadow: @arguments;
}
.box-shadow(10px, 15px);

解析如下所示

box-shadow: 10px 15px 1px #000;

4.模式匹配和导引表达式

.set-attribute(height,@size){
  height:@size;
}
.set-attribute(width,@size){
  width:@size;
}
.set-attribute(@_,@size){
  background:red;
}

运行

@switch:height;
.div1{
  .set-attribute(height,100px);
}

解析如下所示

.div{
  height:100px;
  background:red;
 }

只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。

也可以进行多个参数的匹配

.set-attribute(@color){
  color:@color;
}
.set-attribute(@color,@size){
  height:@size;
  color:@color;
}

5.嵌套

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

解析如下所示

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

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

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

输出

.bordered.float { //串联选择器，作用在同一个元素
  float: left;  
}
.bordered .top {// 后代选择器 ，
  margin: 5px;
}

6.运算
Less可以进行运算,并且可以区分单位

@size:5px;
div{
  width:@size + 1;
  height:(@size * 2) +1;
}
//输出
div{
  width:6px;
  height:11px;
}

更多Less特性请参阅 官方文档