Worker Flow

主要有 Postcss、预处理器的知识点

Postcss

可以直观的理解为：它就是⼀个平台。为什么说它是⼀个平台呢？因为我们直接⽤它，感觉不能⼲什么事情，但是如果让⼀些插件在它上⾯跑，那么将会很强⼤。
PostCSS 提供了⼀个解析器，它能够将 CSS 解析成抽象语法树。
通过在 PostCSS 这个平台上，我们能够开发⼀些插件，来处理我们的 CSS ，⽐如热⻔的： autoprefixer。
PostCSS 可以对 sass 处理过后的 CSS 再处理最常⻅的就是 autoprefixer。

Postcss 值得收藏的插件

postcss-custom-properties 运行时变量
postcss-simple-vars 与 SCSS 一致的变量实现
postcss-mixins 实现类似 SASS 的@MIXIN 的功能
postcss-extend 实现类似 SASS 的继承功能
postcss-import 实现类似 SASS 的 IMPORT
cssnext 面向未来 CSS Grace 修复过去

npm

npm i -D postcss-custom-properties postcss-simple-vars postcss-mixins postcss-extend postcss-import cssnext

yarn

yarn add -D postcss-custom-properties postcss-simple-vars postcss-mixins postcss-extend postcss-import cssnext

pnpm

pnpm add -D postcss-custom-properties postcss-simple-vars postcss-mixins postcss-extend postcss-import cssnext

gulpFile.js
const gulp = require("gulp");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssgrace = require("cssgrace");
const cssnext = require("cssnext");
gulp.task("css", function () {
  const 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"]);

CSS 预处理器/后处理器

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS文件。

预处理器例如： Less、Sass、Stylus，用来预编译 scss ,less 或 styl csssprite，增强了 CSS 代码的复用性，还有嵌套、mixin、变量、循环、函数等，具有很方便的 UI 组件模块化开发能力，极大的提高工作效率。
CSS 后处理器是对 CSS 进行处理。最典型的例子是 CSS 压缩工具（如 css-nano，mini-css-extract-plugin，css-minimizer-webpack-plugin）。还有最近比较火的 Autoprefixer，browserslist，以 CanIUse 上的浏览器支持数据为基础，自动处理兼容性问题。

CSS 解析原理

CSS 选择器匹配元素是逆向解析

解析

- 正向解析 从最外层的 `html` 解析到最内部的 `span`
<html>
  <body>
    <div>
      <p>
        <span></span>
      </p>
    </div>
  </body>
</html>

- 逆向解析： 如果当前的 DOM
元素是div，而不是selector最后的span，那只要一步就能排除。
只有在匹配时，才会不断向上找父节点进行验证。

CSS 预处理的优缺点

ACE 认为的优点：
- 提高 CSS 可维护性
- 易于编写嵌套选择器
- 引入变量，增添主题功能。可以在不同的项目中共享主题文件。
- 通过混合（Mixins）生成重复的 CSS。
- 将您的代码拆分成多个文件。 CSS 文件也可以拆分，但这样做需要一个 HTTP 请求来下载每个 CSS 文件。

Tailwindcss

让你事半功倍的技能

npm i -D tailwindcss @tailwindcss/typography @tailwindcss/nesting @tailwindcss/jit @tailwindcss/line-clamp

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("@tailwindcss/line-clamp"),
    require("@tailwindcss/typography"),
    // ...
  ],
};

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    "@tailwindcss/jit": {},
    "@tailwindcss/nesting": {},
  },
};

Worker Flow

Postcss​

Postcss 值得收藏的插件​

CSS 预处理器/后处理器​

CSS 解析原理​

CSS 预处理的优缺点​

Tailwindcss​