css预处理Less

什么是Less？

Less其实就是css预处理器，简单的说，就是动态编写css。

Less用法

首先以vue中开发为例，先安装less和less-loader

npm install less less-loader
           

1.变量

1.变量值定义

格式： @变量名

@width:100px;
  .hello{
    width: @width;
  }
           

最终输出:

.hello{
    width:px;
  }
           

2.属性变量定义

格式：@{变量名}

@color:color;
  .hello{
    @{color}:blue;
  }
           

最终输出:

.hello{
    color:blue;
  }
           

3.属性部件变量定义

格式：@{变量名}

@color:color;
  .hello{
    background-@{color}: red;
  }
           

最终输出:

.hello{
    background-color: red;
  }
           

4.选择器定义

格式：@{变量名}

@dialog:.dialog;
  @{dialog}{
     width:px;
     height:px;
     background: green;
  }
           

最终输出：

.dialog{
    width: px;
    height: px;
    background: green;
}
           

5.选择器部件定义

格式：@{变量名}

@fix:fix;
  .d-@{fix}{
    color:gold;
  }
           

最终输出：

.d-fix{
    color: gold;
}
           

2.混合（Mixins）

less中允许将已有的class或者id运用在不同的选择器上

1.不带参数

.border{
    border:px solid blue;
  }
  .hello{
    .border;
  }
           

最终输出：

.hello{
    border: px solid blue;
}
           

2.可带参数

.border(@border-wdith){
    border:@border-wdith solid palegreen;
  }
  .hello{
    .border(px);
  }
           

最终输出：

.hello{
    border: px solid palegreen;
}
           

3.默认带值

.border(@border-width:px){
    border:@border-width solid blue;
  }
  .hello{
    .border();
  }
           

最终输出：

.hello{
    border: px solid blue;
}
           

如果不想要默认值，可以.border(参数值)

3.匹配模式

.pos(r){
    position: relative;
  }
  .pos(a){
    position: absolute;
  }
  .pos(f){
    position: fixed;
  }
  .hello{
    .pos(f);
  }
           

最终输出：

.hello{
    position: fixed;
}
           

若：

.pos(@_){
    width:px;
}
           

最终输出：

.hello{
    width:px;
    position: fixed;
}
           

@_表示所有的.pos都必须带上里面的属性

4.运算

@width:20px;
  .hello{
    width: @width*2+10;
  }
           

最终输出：

.hello{
    width: px;
}
           

5.嵌套

.list{
    li{
      width:px;
    }
  }
           

最终输出：

.list li{
    width: px;
}
           

less中悬浮：

.list{
    &:hover{
      background: red;
    }
  }
           

最终输出：

.list:hover{
      background: red;
  }
           

注意：&在less中是表示上一层选择器的意思

6.argument变量

.border(@border-width:px,@x:solid,@c:black){
     border:@arguments;
  }
  .box{
    .border();
  }
           

最终输出：

.box{
    border: px solid black;
}
           

@arguments就是表示（）中所有参数值

7.转义

格式：~”” 或者 ~”

@min768: ~"(min-width: 768px)";
  .hello {
    @media @min768 {
      font-size: px;
    }
  }
           

最终输出：

@media (min-width: px){
    .hello{
    font-size: px;
}
}
           

当less无法识别某个字符串的时候，就得用转义，防止编译错误

8.函数

less内置了很多用于转换颜色、处理字符串等函数，具体见官网地址：http://lesscss.cn/functions/

9.when条件判断

.mixin (@flag) when (@flag){
    font-weight: bold;
  }
  .hello{
    .mixin(true);
  }
           

最终输出：

.hello{
     font-weight: bold;
  }
           

当@flag为真的时候，就调用