预处理器
安装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文档