CSS预处理

    21

PostCSS

将css解析成AST,由插件提供能力,

常用插件

  1. Autoprefixer 为 CSS 中的属性添加浏览器特定的前缀。
  2. postcss-preset-env 根据 browserslist 指定的目标浏览器将一些 CSS 的新特性转换为目标浏览器所支持的语法。
  3. cssnano 提供 CSS 压缩功能。
  4. postcss-nested 提供 CSS 嵌套功能。
  5. postcss-px-to-viewport 提供 px 转 vw 功能。
  6. postcss-custom-properties 支持 CSS 的自定义属性。

优点

  • 插件系统完善,扩展性强。
  • 配合插件功能齐全。
  • 生态优秀。

缺点

  • 配置相对复杂。

Sass

  1. 变量:变量中可以存储颜色、字体或任何 CSS 值。
  2. 嵌套:可嵌套 CSS 选择器,提供清晰的层次结构。
  3. 混合:可以定义&重用代码块。
  4. 扩展/集成:可以在一个选择器内继承另一个选择器。
  5. 操作符:可以在 CSS 中使用操作符进行计算。
  6. 条件/循环语句:可以循环/条件生成 CSS。
  7. 自定义函数:可以自定义复杂操作的函数。

缺点

node-sass安装困难,可用dart-sass代替

Less

  • 变量:变量中可以存储颜色、字体或任何 CSS 值。
  • 嵌套:可嵌套 CSS 选择器,提供清晰的层次结构。
  • 混合:可以定义&重用的代码块。
  • 扩展/集成:可以在一个选择器内继承另一个选择器。
  • 运算:可以在 CSS 中进行计算。
  • 条件/循环语句:可以循环/条件生成 CSS。

优点

  • 使用广泛。
  • 可以在浏览器中运行,容易实现主题定制功能。

缺点

  • 不支持自定义函数(可通过 mixins 实现简单逻辑)。
  • 编程能力相对较弱。

Css Modules

Css In Js

const 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;
  `}
`

Tailwind

评论区
共有评论 0
暂无评论