CSS 预处理器

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

说明：

　　1、预处理处理器常用的功能 ： 变量（variables），代码混合（ mixins） ，嵌套（nested rules）以及 模块化(Modules)

　　　　参考：https://mp.weixin.qq.com/s/tqLlWuKPrpp-fyU5PPXveA 或 https://www.jianshu.com/p/9f64b62e8e65

　　2、less 的语法比较接近css，学习成本也最低。预处理常用的几种功能 less 都有，所以我们这里只是介绍下 less 中常用的几种功能。 参考：https://www.jianshu.com/p/885b74482d81 或 https://www.cnblogs.com/jianxian/p/10636812.html

　　3、在线 less 编译 网站： http://www.yuangongju.com/less 或 http://www.matools.com/less

一、变量（variables）： （值变量、选择器变量、属性变量、url变量（可以变量插值）、声明变量 等），我们用的比较多的就是值变量 和 url变量。 参考https://www.cnblogs.com/jianxian/p/10636812.html

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

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

// 定义变量
@bgColor: #f5f5f5;

// 引用变量
body{
    background-color: @bgColor;
}

　　2、url变量、字符串插值： 项目结构改变时，修改其变量即可。

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

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

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

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

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

　　2.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();
      }

　　2.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;
}