Less的学习

Less 是一门 CSS 预处理语言，它有变量、混合、嵌套和运算等用法。使我们在写CSS时能更灵活。但Less需要编译成.css文件，编译的方法有多种，如webpack的less-loader和编辑器WebStorm的编译等。
我这里会介绍怎么使用 WebStorm监听less文件编译 和 less的基础语法 。

1.WebStorm监听less文件

1. 点击WebStorm左上角的File（文件）选项
2. 再点击Setting（设置）选项
3. 找到Tool（工具）下的File Watchers（文件监听），再点击右边的 + ， 点击less,会弹出一个选框
4. 然后直接点击apply（应用即可），下面三个选项：
   1 immediate file synchronization 是 less 和 css 实时编译，
   2 trigger watcher regardless of syntax errors 不考虑语法错误
   3 trigger watcher regardless of syntax errors 只跟踪根文件。
   自己可以按需勾选。

2. less的基本语法

1. 注释
   less中有两种注释，分别是 // 和 /**/。
   // 这种注释是不会被编译在CSS中的；
   /**/ 这种注释会编译在CSS中，如果想CSS中有注释需要使用这种

2. 变量
   变量的定义： @变量名: 值;
   变量的使用： CSS属性: @变量名;

@background-color: #e4393c;
body{
  background: @background-color;
}

3. 混合
   混合是把一份CSS拷贝到另一份CSS里面，并不是继承关系。
   混合也分 不带参混合 和 带参混合。

不带参混合

定义的类如果不需要编译在CSS中，则需要在类名后加括号 ()。
.类名(){
　　CSS样式
}

//定义
.position(){
  position: relative;
}
body{
  //使用
  .position();
}

定义的类如果需要编译在CSS中，则不需要在类名后加括号。

//定义
.position{
  position: relative;
}
body{
  //使用
  .position;
}

带参混合

带参混合又分为带默认值和不带默认值，可以理解为类名也是变量名的作用域。
带参混合不带默认值：
.类名(@变量名){
　　//CSS样式
}

//定义
.border(@w){
  border: @w solid #333;
}
body{
  //使用
  .border(1px);
}

带参混合带默认值：
.类名(@变量名:值){
　　//CSS样式
}

//定义
.border(@w:1px){
  border: @w solid #333;
}
body{
  //使用
  .border(); 或 .border(5px);
}

4. 匹配模式
   匹配模式类似于JS里的if，但写法上有些偏差，写法和混合的带参不带默认值的写法很像。
   .类名(匹配规则){
   　　//CSS样式
   }

//定义
.position(r){
  position: relative;
}
.position(a){
  position: absolute;
}
body{
  //使用，匹配 r 的CSS类
  .position(r);
}

5. 运算
   可以在数字类的值上使用加减乘除运算，可以不带单位

body{
  color: #eee + 10
}

6. 嵌套
   可以在类里面嵌套着写CSS类，伪类选择器可以使用 &:伪类{}，&代表上一层选择器

body{
  background: @background-color;
  a{
    color: #000;
    &:hover{
       color: red;
    }
  }
}

7. @arguments 变量
   当一个类名里面有多个变量的时候，可以使用 @arguments 把变量全部取出来。

.common-border( @w:1px; @c:#ccc; @s:solid ){
  border: @arguments;
}

8. 避免编译
   当有一些属性值需要保留原样的时候可以使用避免编译,用 属性名: ~'CSS样式';。

.count(){
  width: ~'calc(300px-30px)';
}

9. !important
   可以给样式加最高权重，也可以给混合的类名加。

.common-border( @w:1px; @c:#ccc; @s:solid ){
  border: @arguments;
}
body{
    .common-border()!important;
}

10. 引入less或CSS文件 @import

@import "文件路径";

更多的语法规则可以在 less中文官网 学习。