CSS WorkFlow

CSS预处理器

处理特定格式源文件到目标css的处理程序

预处理器的变革

1. CSS中使用后端模版变量统一处理CSS重复的值
2. sass/less/stylus
3. 直接书写css

预处理器有哪些规范

1. 变量
2. 混合（Mixin)Extend
3. 嵌套规则
4. 运算
5. 函数
6. Namespaces & Accessors
7. Scope
8. 注释

CSS后处理器

1. CSS压缩 CLEAN-CSS
2. 自动添加浏览器前缀Autoprefixer
3. CSS更加美观顺序 CSScomb
4. Rework取代Stylus后处理器发热
5. 前后通吃PostCSS (预处理器和后处理器)

老式处理过程

Source => Parser => AST(类CSS) => Interpreter => AST(纯CSS) => Translator => CSS

新型的处理过程 （共享AST,最后生成CSS)

Source => Parser => AST(纯CSS) => Plugin system [post-simple-vars, post-mixins, PostNested, post-custom…] => AST(纯CSS) => Translator => CSS

抽象语法树（Abstract Syntax Tree, AST)作为程序的一种中间表示形式

PostCSS

Use tomorrow’s CSS syntax, today. 今天使用未来的CSS语法

cssnext （此库已经弃用）

官网介绍：https://cssnext.github.io/

特性

• automatic vendor prefixes
• custom properties & var()
• custom properties set & @apply
• reduced calc()
• custom media queries
• media queries ranges
• custom selectors
• nesting
• image-set() function
• color() function
• hwb() function
• gray() function
• #rrggbbaa colors
• rgba function (rgb fallback)
• rebeccapurple color
• font-variant property
• filter property (svg fallback)
• initial value
• rem unit (px fallback)
• :any-link pseudo-class
• :matches pseudo-class
• :not pseudo-class (to l.3)
• ::pseudo syntax (: fallback)
• overflow-wrap property (word-wrap fallback)
• attribute case insensitive
• rgb() function (functional-notation)
• hsl() function (functional-notation)
• system-ui font-family (font-family fallback)

提供书写前和书写的案例

https://cssnext.github.io/playground/

注意

cssnext已经被弃用，可以迁移至postcss-preset-env

弃用库的原因可查看地址：https://moox.io/blog/deprecating-cssnext/

post-preset-env

官网地址：http://preset-env.cssdb.org/

W3C标准的实现

1. 变量

   :root {
     --main-bg-color: gray;
     --x: 0.5;
     --y: 0.5;
   }

2. 使用CSS变量

   body {
     backgorund: var(--main-bg-color);
   }

3. CSS变量结合calc计算公式

   left: calc(100px * var(--x));

4. 使用CSS变量的默认值

   right: calc(100px * var(--x, 0.1));

5. Javascript给CSS变量赋值

   var el = document.documentElement;
   document.addEventListener("mousemove", ({ clientX, clientY}) => {
     let x = clientX / innerWidth;
     let y = clientY / innerHeight;
     el.style.setProperty("--x", x);
     el.style.setProperty("--y", y);
   })

POSTCSS 插件

1. postcss-custom-properties 允许使用自定义属性，运行时的变量
2. postcss-simple-vars 可以在值和选择器中使用变量与scss一致变量实现
3. postcss-mixins 实现类似SASS的@mixin功能
4. postcss-extend 实现类似SASS的继承功能
5. postcss-import 实现类似SASS功能的@import
6. Cssnext 面向未来 CSSGrace修复过去