less

简介

less（leaner style sheets）是一门css的预处理语言。

vscode将less文件编译成css或者wxss文件

1. 安装Easy Less插件：注意版本的选择，使用1.7.0
2. 配置settings.json

"less.compile": {
    "compress": false,//是否压缩
    "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
    "out": true,
    // "outExt": ".wxss"
    "outExt": ".css"
},

基础语法

1.less中的变量

1. 使用示例
   1. less程序如下

   @width: 100px;
   .box1 {
       width: @width;
   }
   
   // 类名
   @b: box2;
   @dir: src;
   .@{b} {
       background-image: url("@{dir}/xxx.jpg");
   }
   

   2. 编译成的css如下：

   .box1 {
     width: 100px;
   }
   .box2 {
     background-image: url("src/xxx.jpg");
   }
   
   

2.父元素

1. &表示外层的父元素
   1. 使用示例

   .box1 {
       /* 后代元素 */
       .box2 {
           color: blue;
       }
       /* 子元素 */
       >.box3 {
           color: red;
           &:hover{
               color: black;
           }
       }
       /* 为box1元素设置hover，&表示外层的父元素 */
       &:hover {
           color: greenyellow;
       }
   }
   

   2. 编译后的css如下

   .box1 {}
   
   .box1 .box2 {
       color: blue;
   }
   
   .box1>.box3 {
       color: red;
   }
   
   .box1>.box3:hover {
       color: black;
   }
   
   .box1:hover {
       color: greenyellow;
   }
   

3.扩展

1. :extend()对当前选择器扩展指定选择器的样式。（选择器分组）
   1. 使用示例

   .box1 {
       color: chartreuse;
   }
   @width: 100px;
   .box2:extend(.box1) {
       width: @width;
   }
   

   2. 编译后的css代码如下

   .box1,
   .box2 {
     color: chartreuse;
   }
   .box2 {
     width: 100px;
   }
   
   

4.混合函数

1. 使用类选择器时可以在选择器后边添加一个括号，这样就创建了一个混合mixins。
2. 混合函数中可以设置变量。
   1. 使用示例

   // 定义混合函数,指定参数的默认值
   .test(@width:1000px, @height:1000px, @bg-color:blue) {
       width: @width;
       height:@height;
       background-color: @bg-color;
   }
   div {
       // 1.调用混合函数，按照顺序传递参数
       // .test(100, 100, #bfa);
       // 2.调用混合函数，按照名称传递参数
       // .test(@width:100px, @height:100px, @bg-color:#bfa);
       .test();
   }
   

   2. 编译后的css代码如下

   div {
     width: 1000px;
     height: 1000px;
     background-color: blue;
   }
   
   

3. less预定义了混合函数可以直接使用

5.less中可以直接进行数值的运算

6.使用@import("xxx.less")引入其他的less程序