预处理器Less

预处理器Less

1 什么是预处理器

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。
 
less的中文官网：http://lesscss.cn/
 bootstrap中less教程：http://www.bootcss.com/p/lesscss/

2 Less编译工具

  koala 官网:www.koala-app.com 

3 less中的注释

      以//开头的注释，不会被编译到css文件中
       以/**/包裹的注释会被编译到css文件中  

4 less中的变量

使用@来申明一个变量：@pink：pink;

4.1 作为普通属性值只来使用：直接使用@pink  

@backgroundColor:#CCC;
body{
  background-color: @backgroundColor;
}

4.2 作为选择器和属性名：#@{selector的值}的形式

@backgroundColorCss:background-color;
body{
  @{backgroundColorCss}: #CCC;
}

@backgroundColorClass:body;
@{backgroundColorClass}{
  background-color: #CCC;
}

4.3 作为URL：@{url}

@url:"../img/bg.jpg";
body{
    background: url("@{url}");
}

4.4 变量的延迟加载

当所有作用域加载完后才会加载变量

@var: 0;
.class {
@var: 1;
    .brass {
      @var: 2;
      three: @var;  //3
      @var: 3;
    }
  one: @var;  //1
}

5 less中的嵌套规则

1.基本嵌套规则

body{
  div{
    width: 100%;
  }
  img{
    width: auto;
  }
}

输出结果：

2.&的使用

body{
  div{
    width: 100%;
    &:hover{
      background-color: antiquewhite;
    }
  }
  img{
    width: auto;
  }
}

输出结果：

6 less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

6.1 普通混合

普通混合会将混合代码编译到CSS文件中,导致CSS文件文件过大

.w100{
  width: 100%;
}
body{
  div{
    .w100;
    &:hover{
      background-color: antiquewhite;
    }
  }
  img{
    .w100;
  }
}

输出结果：

6.2 不带输出的混合

.w100(){
  width: 100%;
}
body{
  div{
    .w100;
    &:hover{
      background-color: antiquewhite;
    }
  }
  img{
    .w100;
  }
}

添加“()”，后混合不会输出到CSS文件中

输出结果：

6.3 带参数的混合

.w100(@w){
  width: @w;
}
body{
  div{
    .w100(100px);
    &:hover{
      background-color: antiquewhite;
    }
  }
  img{
    .w100(200px);
  }
}

输出结果：

6.4 带参数并且有默认值的混合

.w100(@w:100px){
  width: @w;
}
body{
  div{
    .w100(100px);
    &:hover{
      background-color: antiquewhite;
    }
  }
  img{
    .w100(200px);
  }
}

输出结果：

6.5 带多个参数的混合

.w100(@w:100px,@h:100px){
  width: @w;
  height: @h;
}
body{
  div{
    .w100(100px);
    &:hover{
      background-color: antiquewhite;
    }
  }
  img{
    .w100(200px,50px);
  }
}

输出结果：

6.6 命名参数

.w100(@w:100px,@h:100px){
  width: @w;
  height: @h;
}
body{
  div{
    .w100(@h: 50px);
    &:hover{
      background-color: antiquewhite;
    }
  }
  img{
    .w100(@h: 200px);
  }
}

输出结果：

6.7 匹配模式

语法：

.test(匹配符，...参数){}

.w100(RED,@w:100px,@h:100px){
  width: @w;
  height: @h;
  background-color: red;
}
.w100(BLUE,@w:100px,@h:100px){
  width: @w;
  height: @h;
  background-color: blue;
}
body{
  div{
    .w100(RED,@h: 50px);
    &:hover{
      background-color: antiquewhite;
    }
  }
  img{
    .w100(BLUE,@h: 200px);
  }
}

输出结果：

我们可以对重复代码进行提取，重写一个同名混合，匹配符为'@_'，每次调用该混合时，都会调用该混合

.w100(@_,@w:100px,@h:100px){
  width: @w;
  height: @h;
}
.w100(RED,@w:100px,@h:100px){
  background-color: red;
}
.w100(BLUE,@w:100px,@h:100px){
  background-color: blue;
}
body{
  div{
    .w100(RED,@h: 50px);
    &:hover{
      background-color: antiquewhite;
    }
  }
  img{
    .w100(BLUE,@h: 200px);
  }
}

输出结果：

6.8 arguments变量

.border(@1,@2,@3){
  border: @arguments;
}
body{
  div{
    .border(1px,solid,#ccc);
  }
  img{
    .border(1px,solid,#777);
  }
}

输出结果：

7 less运算

在less中可以进行加减乘除的运算，只需要计算的一方带单位即可，如果都不带那就没有，如果都带且不相同，已第一个为准

.w(@w){
  width: @w;
}
body{
  div{
    .w(100 + 100px);
  }
  img{
    .w(100rpx + 100px);
  }
  ul{
    .w(100px + 100px);
  }
  li{
    .w(100 + 100);
  }
}

输出结果：

8 less继承