PostCSS
将css解析成AST,由插件提供能力,
常用插件
- Autoprefixer 为 CSS 中的属性添加浏览器特定的前缀。
- postcss-preset-env 根据
browserslist
指定的目标浏览器将一些 CSS 的新特性转换为目标浏览器所支持的语法。 - cssnano 提供 CSS 压缩功能。
- postcss-nested 提供 CSS 嵌套功能。
- postcss-px-to-viewport 提供 px 转 vw 功能。
- postcss-custom-properties 支持 CSS 的自定义属性。
优点
- 插件系统完善,扩展性强。
- 配合插件功能齐全。
- 生态优秀。
缺点
- 配置相对复杂。
Sass
- 变量:变量中可以存储颜色、字体或任何 CSS 值。
- 嵌套:可嵌套 CSS 选择器,提供清晰的层次结构。
- 混合:可以定义&重用代码块。
- 扩展/集成:可以在一个选择器内继承另一个选择器。
- 操作符:可以在 CSS 中使用操作符进行计算。
- 条件/循环语句:可以循环/条件生成 CSS。
- 自定义函数:可以自定义复杂操作的函数。
缺点
node-sass安装困难,可用dart-sass代替
Less
- 变量:变量中可以存储颜色、字体或任何 CSS 值。
- 嵌套:可嵌套 CSS 选择器,提供清晰的层次结构。
- 混合:可以定义&重用的代码块。
- 扩展/集成:可以在一个选择器内继承另一个选择器。
- 运算:可以在 CSS 中进行计算。
- 条件/循环语句:可以循环/条件生成 CSS。
优点
- 使用广泛。
- 可以在浏览器中运行,容易实现主题定制功能。
缺点
- 不支持自定义函数(可通过 mixins 实现简单逻辑)。
- 编程能力相对较弱。
Css Modules
Css In Js
jsxconst Button = styled.a` /* This renders the buttons above... Edit me! */ display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; /* The GitHub button is a primary button * edit this to target it specifically! */ ${props => props.primary && css` background: white; color: black; `} `