css workflow

历史

上古时期：刀耕火种

最原始的预处理：模板插入

.container {
    left: <%= left%>px;
}

手写前缀

.info {

  -webkit-transition: width .3s;
  -moz-transition: width .3s;
  -ms-transition: width .3s;
  -o-transition: width .3s;
  transition: width .3s;//标准写法放最后
}

工业革命

sublime手动处理前缀随着前后端分离，以及web前端工程化的日益完善，逐渐出现一些css工程化的解决方案

avatar

css 预处理器

sass/scss 2006
less 2009
stylus 2011

特性：

variables

less
@base: #f938ab;
border: 1px solid @base;

sass
$base: #F90;
border: 1px solid $base;

Nesting

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
//输出

Mixins

less
.transition(value) {
  -webkit-transition: value;
     -moz-transition: value;
       -o-transition: value;
          transition: value;
}
.foo {
  .transition(width .3s);
}

sass
@mixin transition($value) {
  -webkit-transition: $value;
     -moz-transition: $value;
       -o-transition: $value;
          transition: $value;
}
.foo {
  @include transition(width .3s);
}

Operations
Functions
namespaces
scope
import
...

实现原理：

取到 DSL源代码的分析树
将含有动态生成相关节点的分析树转换为静态分析树
将静态分析树转换为CSS的静态分析树
将CSS的静态分析树转换为CSS 代码

####特点: 逻辑处理能力强，可以优化项目结构，但是采用特殊语法，和预处理框架耦合度高

css 后处理器

压缩 clean-css
自动加前缀 AntoPrefixer
...

看一下预处理器是如何前缀的？分别写mixinx 然后再入引用。后处理器如何处理的？

.foo {
  transition: width .3s;
}
//根据你的Browserslist配置
转换成
.foo {
  -webkit-transition:  width .3s;
     -moz-transition:  width .3s;
       -o-transition:  width .3s;
          transition:  width .3s;
}

实现原理:

将源代码做为CSS解析，获得分析树
对CSS的分析树进行后处理
将CSS的分析树转换为CSS代码

特点：

使用原生语法，更贴近未来标准，但是逻辑处理等方便偏弱

avatar

postcss 前后通吃

前后通吃，既能实现预处理功能，又能处理后处理器做的事，而且功能不仅如此，采用插件系统，即插即用。

postcss让css 工作流变得更加清晰。

未来css工作流可能是原生css未来标准 + postcss等处理器。现在项目中流行的方式是预处理+postcss结合使用。

cssnext post-preset-env

使用CSS绘制图案的Web组件 css-doodle

各种酷炫吊炸天有木有 demo

    <css-doodle>
        :doodle{ @grid : 1x10 / 61.8vmin; };
        border-radius: 50%;
        @place-cell:center;
        @size:calc(@index()*10%);
        border-color: hsla(calc(20*@index()), 70%, 68%, calc(3 / @index()*.8));
        border-width:calc(@index()*1vmin);
        border-style: dashed;
        --d: @rand(20s,40s);
        --rf: @rand(360deg);
        --rt: calc(var(--rf) + @pick(1turn,-1turn));
        animation: spin var(--d) linear infinite;
        @keyframes spin {
        from{
        transform: rotate(var(--rf));
        }
        to{
        transform: rotate(var(--rt));
        }
        }
    </css-doodle>

大漠

# css workflow

# 历史

# css 预处理器

# 特性：

# 实现原理：

# css 后处理器

# 实现原理:

# 特点：

# postcss 前后通吃

# cssnext post-preset-env

# 使用CSS绘制图案的Web组件 css-doodle