CSS 预处理器

# CSS 预处理器

CSS 预处理器就是指能让开发者通过预处理器自己独有的语法来生成 CSS 的程序。

# 预处理器变革

# 预处理器常用规范

变量
混合（Mixin）Extend
嵌套规则
运算
函数
Namespaces & Accessors
Scope
注释

# CSS 后处理器

CSS 压缩，clean-css (opens new window)
自动添加浏览器前缀，Autoprefixer (opens new window)
CSS 更加美观，CSScomb (opens new window)
rework (opens new window) 取代 Stylus (opens new window) 后，后处理器开始发热
前后预处理器通吃，PostCSS (opens new window)

# CSS 工作流的变化

# CSS Next

postcss-cssnext (opens new window) 是一个 PostCSS 插件，可帮助开发者使用当今最新的 CSS 语法。它将新的 CSS 规范转换为更兼容的 CSS，因此开发者无需等待浏览器支持。

不过现在 postcss-cssnext 项目已经被废弃了，取而代之的是 postcss-preset-env (opens new window)。

# PostCSS 值得收藏的插件

postcss-custom-properties (opens new window)：运行时变量
postcss-simple-vars (opens new window)：与 sass 一致的变量实现
postcss-mixins (opens new window)：实现类似 sass 的 @mixin 的功能
postcss-extend (opens new window)：实现类似 sass 的继承功能
postcss-import (opens new window)：实现类似 sass 的 import
postcss-sugarss-language (opens new window)：一个 vscode 插件，用来支持 PostCSS 和 SugarSS，装了这个之后使用 cssnext 语法就不会报错了
postcss-loader (opens new window)、postcss-preset-env (opens new window)：webpack 中使用 PostCSS 时需要安装的 loader 和插件，这两者通常一起使用
CSS Grace (opens new window)：面向未来的 CSS 后处理工具

# Gulp 快速配置 PostCSS

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssgrace = require('cssgrace');
var cssnext = require('cssnext');
gulp.task('css', function () {
  var processors = [
  autoprefixer({browsers: ['last 3 version'],
  cascade: false,
  remove: false
  }),
  cssnext(),
  cssgrace
  ];

  return gulp.src('./src/css/*.css')
  .pipe(postcss(processors))
  .pipe(gulp.dest('./dist'))
});
gulp.task('watch', function(){
  gulp.watch('./src/css/*.css', ['css']);
});
gulp.task('default', ['watch', 'css']);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# css-doodle

css-doodle (opens new window) 是一个用于使用 CSS 绘制图案的 Web 组件。
一个小 demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        :root {
            --customUnit: 100%;
            --bgColor: #0a0c27;
        }

        @supports(display: flex) {
            html,
            body {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        html,
        body {
            width: var(--customUnit);
            height: var(--customUnit);
            background: var(--bgColor);
        }
    </style>
    <script src="https://unpkg.com/css-doodle@0.37.4/css-doodle.min.js"></script>
</head>

<body>
    <css-doodle>
        :doodle{
            @grid: 1 x 10 / 50vmax;
        }
        @place-cell:center;
        @size:calc(@index() * 10%);
        border-width: calc(@index()*1vmin);
        border-style: dashed;
        border-color: hsla(calc(20*@index()), 70%, 68%, calc(3/@index()*.8));
        border-radius: 50%;
        --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>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# 贝塞尔曲线

cubic-bezier (opens new window) 网站能够帮助我们方便快速的设置贝塞尔曲线。

# CSS in JS

CSS in JS 就是指将应用的 CSS 样式写在 JS 文件里，这样就可以在 CSS 中使用一些属于 JS 的东西诸如模块声明、变量定义、函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。

CSS in JS 在国内兴起是因为 React 等框架的流行。CSS in JS 在 React 社区的热度是最高的，这是因为 React 本身不会管用户怎么去为组件定义样式的问题，而 Vue 和 Angular 都有属于框架自己的一套定义样式的方案。

实现 CSS in JS 的库有这些 (opens new window)，其中最热门的就是 styled-components (opens new window)。

CSS-in-JS Playground (opens new window) 是一个可以快速尝试不同 CSS in JS 实现的网站。

下面是一个 CSS in JS 的小 demo，其中，

typed-css-modules-loader (opens new window) 这个插件是用来生成 css 的配置声明文件的，能够让我们快速知道某个 css 文件中都有那些类可以使用。
Styletron (opens new window) 是一个 CSS in JS 库，它与 React 配合使用效果很好，但也可以与其他框架或者纯 JS 一起使用。

生成后的 home.css.d.ts 的文件内容如下：

declare const styles: {
  readonly "test": string;
  readonly "f-14": string;
};
export = styles;

1
2
3
4
5

index.js

// css in js
import home from './home.css';
console.log('🌈', home);
document.getElementById(
  'app'
).innerHTML = `<h1 class="${home['test']}">京程一灯</h1>`;

1
2
3
4
5
6

home.css

.test {
  color: red;
  font-size: 14px;
}

.f-14 {
  font-size: 14px;
}

1
2
3
4
5
6
7
8

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.css$/,
        exclude: /node_modules/,
        loader: 'typed-css-modules-loader',
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

package.json

{
  // ...
  "scripts": {
    "dev": "webpack --mode development"
  },
  // ...
  "devDependencies": {
    "css-loader": "^4.2.0",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "styletron": "^3.0.4",
    "styletron-utils": "^3.0.4",
    "typed-css-modules-loader": "^0.0.18"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

关于 Styletron，还可以使用它将重复的 CSS 代码标记出来。

// demo.js
const Styletron = require('styletron');
const { injectStyle } = require('styletron-utils');
const styletron = new Styletron();
const redButtons = injectStyle(styletron, {
  color: 'red',
  fontSize: '14px',
});

const blueButtons = injectStyle(styletron, {
  color: 'blue',
  fontSize: '14px',
});
console.log(redButtons, blueButtons);
console.log(styletron);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行 node demo.js 命令后，会在终端输出如下内容：

可以看到，它会把重复的 css 代码标记出来。

← CSS 布局 CSS 分层 →