CSS 预处理器—less

css预处理器有：sass/scss、less、stylus 

说明：

1. 预处理处理器常用的功能 ： 计算功能，变量（variables），代码混合（ mixins），继承 ，嵌套（nested rules）以及 模块化(Modules) 
   参考： https://www.jianshu.com/p/9f64b62e8e65
2. less 的语法比较接近css，学习成本也最低。预处理常用的几种功能  less 都有，所以我们这里只是介绍下 less 中常用的几种功能。   
   参考：https://www.jianshu.com/p/885b74482d81 或 https://less.bootcss.com/【推荐，官网】
3. 在线 less 编译 网站： http://www.matools.com/less

一、计算功能：

• 说明：
  • 使用计算功能的好处就是，直接把计算过程写在这里了。后面要调整只要调整 算式的关键部分（不变的值有时不知道也不用再去其它地方找了），不需要我们出现计算下。
  • 原生css也有 计算功能cacl()，但过多地使用calc()函数可能会导致CSS文件的体积增加，从而增加页面的加载时间。预处理的计算编译成css就是确定的值。
    所以原生cacl()函数，只用在相对单位的计算上，如百分比。预处理器的 计算 可以随意使用，不会对css有任何影响。

• // 所有操作数被转换成相同的单位
  @conversion-1: 5cm + 10mm; // 结果是 6cm
  @conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

二、变量（variables）：https://zhuanlan.zhihu.com/p/161182573 

　　变量有：属性值变量、选择器变量、属性变量、url变量（可以变量插值）、声明变量 等），我们用的比较多的就是值变量 和 url变量。               

   　　　　　　　　　　　在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。

1. 属性值变量：
   是指 对某  一个属性值设置一个变量 ，一个变量就表示一个属性值，没有其他的属性。所以 使用这个变量 的地方，都是放在属性值的地方。如下：

   // 定义变量
   @bgColor: #f5f5f5;
   
   // 使用变量
   body{
       background-color: @bgColor;
   }

2. 选择器变量：
   变量可以把选择器变为一个动态的选择器，也可以复用选择器中重复的字符。在使用选择器变量时，变量名需要放在用 @ 符号前缀的花括号 {} 内。

   @name: xkd_top;
   
   .@{name} {
       font-size: 14px;
   
   }
   #@{name} {
       color: #aaa;
   }
   .div_@{name} {
       padding: 10px;
   }

   选择器变量  声明方式 和 值变量是一样的，但是使用方式有点区别。选择器变量，使用格式是  @{name}，可以做字符串拼接。

3. 属性名变量：
   属性名变量的使用其实和选择器变量的使用差不多，都是通过 {} 将变量名括起来

   @fz:font-size;
   
   h3{
       @{fz}:18px;
   }
   
   p{
       @{fz}:12px;
   }

   使用方法同 选择器变量一样，也是 @{name} 

4. url变量： 
   使用场景，当项目结构改变时，修改其变量即可。使用格式同选择器变量  @{name}，做字符串拼接。

         /* Less 代码 */
         @images: "../img";//需要加引号
         body {
           background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
         }
       
         /* 生成的 CSS 代码*/
         body {
           background: url("../img/dog.png");
         }

总结：less中变量声明的格式都一样，但是使用方式有差异。除了属性值变量的使用格式 @name，其它使用格式都是 @{name}。

三、代码混合（ mixins）：

　　混合本质就是一种 less函数， 可以理解为 上面 变量功能的升级，变量只是对一个 属性值 的重复使用；而混合是对多个 属性 的重复使用。所以混合是放在属性名那个地方的。

　 （亲测）混合中，复用的选择器本身只能是一个选择器，不能是混合选择器的组合，因为这个复用的选择器本质上一个函数名。可以在嵌套内声明，就相当于局部函数。

　　1、非函数写法  - -  继承：less混合 的 继承 写法， less编译后，这个 被继承的选择器本身 是会保留的。

      .borde_style {
          border-top: solid 1px #595959;
          border-bottom: solid 2px #595959;
      }
      #header span {
          height: 16px;
          .borde_style;
      }

　　2、函数写法 - - 无参数：less混合 的 函数 写法， less编译后，这个 复用的选择器本身 是不会被保留的。 非继承的情况下，推荐这种写法。

      .borde_style() {
          border-top: solid 1px #595959;
          border-bottom: solid 2px #595959;
      }
      #header span {
          height: 16px;
          .borde_style;  // 这里.borde_style带上括号也可以，即.borde_style();
      }

　　3、函数写法 - - 带参数：less的混合和  JS 函数 很像

    .border-radius(@radius) {
      -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
              border-radius: @radius;
    }
    #header {
      .border-radius(4px);
    }

四、嵌套（nested rules）：

　　less嵌套还是比较简单的。表示上一层选择器用 & 表示，一般伪类都会用到外层的选择器。

    .container {
        padding: 0;
        .header {
            background-color: red;
        }
    }

    #header {
      &:after {        /* 这里使用 & 代表上一层的选择器 */
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }

五、模块化(Modules)  ：

　　模块化，就是引入外面的less文件。

@import ‘./main.less ’

 

 

---

 上面是 css 预处理器中经常用到的功能，下面介绍下 预处理的其它功能。 还是介绍 less 的功能                      https://blog.csdn.net/pedrojuliet/article/details/72887490

 一、变量 运算：四则运算

　　1、作用域：就近原则

二、颜色函数：CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等。直接把一个颜色  变成  高亮时对应的色值 或  算出 几个颜色合并后的色值。

lighten(@color, 10%); 
darken(@color, 10%);  
saturate(@color, 10%);  
desaturate(@color, 10%); 
spin(@color, 10); 
spin(@color, -10); 
mix(@color1, @color2);

/*  less  */
@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 10%);
}

/*  生成css  */
h1 {
  background: #0982c1;
  border: 3px solid #076190;
}