Less 复习

1. 安装、配置插件

1）安装插件

easy-less 

2）点击扩展配置

3）点击在settings.json中编辑

 4）做一些配置

"less.compile": {
    "compress": false,
    "sourceMap": false,
    "out": "index",
    "outExt": ".css"
},

5）重启

 到这里就完成了，我们手动创建一个less文件，然后Ctrl+S就可以自动生成更新其对应的css文件了。

2. 注释

以/**/会被编译到CSS文件中去，而//开头的注释是不会被编译到CSS中。

3. ⭐⭐⭐变量：

格式@VariableName: VariableValue

// less
@color: pink;  // 属性值
@w: width;     // 属性名   不常用
@wp: #wrap;    // 选择器   不常用
@{wp}{                       // 选择器
  @{w}: 300px;               // 属性名
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
  background-color: @color;  // 属性值
} 


// less ---> css

#wrap{
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
  background-color: #ffc0cb;
} 

4. 延迟加载

@height: 5px;
.class{
  @height: 10px;
  
  .brass{
    @height: 15px;
    height: @height; // 20px
    @height: 20px;
  }
  
  height: @height    // 10px
}

less 会等待作用域中所有的变量都解析完，再去赋值。

5. ⭐⭐⭐嵌套规则 --- 伪类

伪类，我们需要在:hover前面加一个&符号，让伪类和真实的类连接起来。

// ------------- 正确 -------------
// less
#wrap {
  width: 300px;
  height: 300px
  .inner{
    position: absolute;
    left: 0;
    right: 0;
  
    &:hover{                 // 在这里加个&符号
      background: pink;
    }

  }
}

// css
#wrap{
  width: 300px;
  height: 300px
}
#wrap .inner{
  position: absolute;
  left: 0;
  right: 0;
}
#wrap .inner:hover{          // 于是这里就链接起来了
  background: pink;
}

// ------------- 错误 -------------
// less
#wrap {
  width: 300px;
  height: 300px
  .inner{
    position: absolute;
    left: 0;
    right: 0;
  
    :hover{                // 这里不能将伪类看作一般的子类
      background: pink;
    }

  }
}

// css
#wrap{
  width: 300px;
  height: 300px
}
#wrap .inner{
  position: absolute;
  left: 0;
  right: 0;
}
#wrap .inner :hover{      // 否则会在:hover前多一个空格
  background: pink;
}

6. mixin

混合其实就是在抽取公共的样式，提高复用性。

// less  -- 未使用mixin --
#wrap{
  position: relative;
  margin: 0 auto;
  .inner1{
    margin: 100px;          // 重复的部分
    height: 100px;          // 重复的部分
    border: 1px solid;      // 重复的部分
    background-color: pink; // 重复的部分
  }
  .inner2{
    margin: 100px;          // 重复的部分
    height: 100px;          // 重复的部分
    border: 1px solid;      // 重复的部分
    background-color: pink; // 重复的部分
  }

}


// less   ------- 使用mixin抽取出重复的部分 -------
.juzhong{
  margin: 100px;          
  height: 100px;          
  border: 1px solid;      
  background-color: pink; 
}                      

#wrap{
  position: relative;
  margin: 0 auto;
  .inner1{
    .juzhong;           // --  直接使用mixin  --
  }
  .inner2{
    .juzhong;           // --  同上  --
  }
}
// less ---> css
.juzhong{                // ------------------------
  margin: 100px;         //            ↑
  height: 100px;         //     这一部分的代码是冗余的
  border: 1px solid;     //     编译到这里毫无意义
  background-color: pink;//            ↓
}                        // ------------------------
#wrap{
  position: relative;
  margin: 0 auto;
  .inner1{
    margin: 100px;          
    height: 100px;          
    border: 1px solid;      
    background-color: pink; 
  }
  .inner2{
    margin: 100px;          
    height: 100px;          
    border: 1px solid;      
    background-color: pink; 
  }
}

可以看到，mixin其实就是将重复的代码提取出来，在编译后，又放到了重复的位置。mixin仅仅只是在一定程度上解放了程序员的双手，但是程序在执行上并没有任何的优化。 而且还会将我们抽取的mixin的代码编译单独到

7.不输出、传递参数、指定形参默认值、命名参数的mixin

• 不输出？不输出指的就是编译后的css文件中，没有用的.juzhong的那一块代码。我们完全没有必要让它编译过去。
• 传递参数？当我们想要手动地设定某个属性的值时，就可以通过像函数参数那样的方式进行传递。
• 形参默认值？当我们不想传递传递参数时，形参默认值就发挥了作用。
• 命名参数？其实也就是我们想要对指定的某一个形参传递参数时，不能把前面的位置空着，那么就需要我们使用命名参数。  

// less    
// 在juzhong后加一个()，让它变得像个函数一样，就可以很快地实现不输出的目的
.juzhong(@h: 100px, @w: 100px, @bc: pink){   // 我们在这里指定形参默认值
  height: @m;  
  width: @h;     
  border: 1px solid;  
  background-color: @bc;
}
#wrap{
  position: relative;
  margin: 0 auto;
  .inner1{
    .juzhong(150px, 150px, gray);          // 传递参数
  }
  .inner2{
    .juzhong(150px, 150px);                // 使用形参默认值
  }
  .inner3{
    .juzhong(150px, @bc: yellow);          // 使用命名参数
  }
}

// less ---> css
// 可以看到已经没了juzhong的一大块
#wrap{
  position: relative;
  margin: 0 auto;
  .inner1{
    margin: 150px;          
    height: 150px;          
    border: 1px solid;      
    background-color: gray; 
  }
  .inner2{
    margin: 150px;          
    height: 150px;          
    border: 1px solid;      
    background-color: pink; 
  }
  .inner3{
    margin: 150px;          
    height: 100px;          
    border: 1px solid;      
    background-color: yellow; 
  }
}

CSS画三角形时，在IE6即IE7中存在的一个问题：

首先，我们先画一个三角形：

width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: transparent transparent pink transparent;

• transparent（透明）引入于C3，但是这两个版本并不支持transparent，所以我们需要引入haslayout，只需要在加上overflow:hidden即可。其实很多IE6、7的样式问题，都可以由它解决。
• 透明的地方错误地显示成黑色。我们可以设置透明的地方边框为虚线，就可以让黑色消失。

所以针对这两个版本，代码就变成了这样：

width: 0;
height: 0;
border-width: 40px;
border-style: dashed solid dashed dashed;
border-color: transparent transparent pink transparent;
overflow: hidden

这是一个兼容极好的三角形。 

8. ⭐⭐⭐匹配模式

匹配模式的作用主要是针对像下面这样，名字相同，但参数不同的mixin。内部存很多重复的代码，就可以抽取出来，然后第一个参数写@_，总参数个数保持一致即可。

匹配模式，每次调用triangle名字的less样式时，都会先匹配同名的参数带@_的less样式。

一定要注意，@_和T、R、B、L相互匹配，如果没有T、R、B、L这些参数，@_是不起作用的。其次就是匹配模式参数个数都要一样多，也就是(@_, @w, @c)和(T, @w, @c)的参数数目是相同的。名字不同无所谓。

​.triangle(@_, @w, @c){   // 匹配模式  所以这里也要有三个参数
width: 0;
height: 0;
overflow: hidden
}

​.triangle(T, @w, @c){    // 这里有三个参数
border-width: @w;
border-style: solid dashed dashed dashed;
border-color: @c transparent transparent transparent;
}
.triangle(R, @w, @c){
border-width: @w;
border-style: dashed solid dashed dashed;
border-color: transparent @c transparent transparent;
}
.triangle(B, @w, @c){
border-width: @w;
border-style: dashed dashed solid dashed;
border-color: transparent transparent @c transparent;
}
.triangle(L, @w, @c){
border-width: @w;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent @c;
}

9. arguments变量

也就是实参列表，用的不多

// less
.border(@w, @s, @c){
  border: @arguments;  // 将实参列表拿过来
}

.box{
  .border(1px, solid, pink);
}

// less ---> css
.box{
  .border: 1px solid pink;
}

10. 计算

less可以直接像在js中那样写表达式来计算，例如width: 100px+100px。假如我们需要动态地计算一个属性，而需要使用css的cacl时，需要将表达式的两侧用~""包裹：calc(~"100vw - 174px")。cacl是运行时计算，也就是在运行程序后，交给浏览器去计算。

11. ⭐⭐⭐继承

使用继承时，就不能再使用mixin了。继承性能上比混合更高，但是灵活性就不如混合。

来看一个使用案例：

// juzhong-extend.less   使用了继承，就不能再使用混合了，也就不能再有括号
.juzhong{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
// less
import "./juzhong-extend.less"
#wrap{
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
  .inner{   
    &:extend(.juzhong);  // 继承
    &:nth.children(1){
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    &:nth.children(2){
      width: 50px;
      height: 50px;
      background-color: yellow;
    }
  }
}


// less ---> css
.juzhong,
#wrap .inner{    // 成功继承
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
#wrap{
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-children(1){
  width: 100px;
  height: 100px;
  background-color: pink;
}
#wrap .inner:nth-children(2){
  width: 50px;
  height: 50px;
  background-color: yellow;
}

为什么继承会比mixin更高效呢？

因为继承采用了子元素会继承父元素样式的特性，而mixin就是单纯的Ctrl+C、Ctrl+V，将重复的代码复制过去，会让代码变得冗余。

12. 避免编译

当我们在less中，在cacl中写一个计算式，编译的过程中，less编译器会直接将其计算出来放在cacl中，既然我们用了cacl，那么这个结果就显然不是我们想要的，我们在这里更想要一个表达式，来看一下如何解决：

// less
*{
  margin: 100*10px;
  padding: cacl(100px+100);
}

// less ---> css
*{
  margin: 1000px;
  padding: cacl(200px);  // 显然我们是不想让它进行编译的
}

// less
*{
  margin: 100*10px;
  padding: ~"cacl(100px+100)";   // 我们在这里加个  ~""  来避免被编译
}

// less ---> css
*{
  margin: 1000px;
  padding: cacl(100px+100);  // 这个时候，计算的任务就交给浏览器了
}