less&sass&postcss

预处理器

安装less编译器: npm i less -D(出现一个叫lessc的命令)
less
    变量 : @color:red
    嵌套 : 使用{} & ;
    混合 :
        定义   .混合名(参数){css声明}
        使用   .混合名(实参)
        作用   将css声明原封不动的复制到混合使用的位置
    继承 :
        定义   定义一个class
        使用   选择器:extend(class名称 all)
    @import : @import url
    循环:使用混合进行递归


安装sass编译器: npm i sass -D(出现一个叫sass的命令)
sass
    变量 : $color:red
    嵌套 :
        使用缩进  &  (后缀是sass)
    混合 :
        定义   @mixin 混合名(参数){css声明}
        使用   @include 混合名(实参)
        作用   将css声明原封不动的复制到混合使用的位置
    继承 :
        定义   定义一个class
        使用   选择器 @extend class名称
    @import : @import url
    循环 : @for ... from ... through ...

后置处理器

安装: npm i postcss-cli postcss -D (会出现postcss的命令)
安装插件: npm i autoprefixer -D
配置 : 定义配置文件.postcssrc.js
    const autoprefixer = require("autoprefixer");
    module.exports={
        plugins:[
            autoprefixer()
        ]
    }

定义项目的兼容程度:
    1. package.json 注册一个叫browserslist字段
        "browserslist": [
            "cover 99.5%"
         ]
    2. 新增一个叫.browserslistrc配置文件
         cover 99.5%

命令行的使用:

    lessc 路径/源文件名 路径/目标文件名
    sass 路径/源文件名 路径/目标文件名
    postcss 路径/源文件名 -o 路径/目标文件名

详情见less&sass&postcss文档