预/后处理器

路线前端CSSSCSS

CSS 代码的语法比较简单，不具备编程能力，因此产生了预处理器和后处理器。

预处理器接受输入（例如 SCSS 代码），然后输出为普通 CSS 代码；

后处理器接受 CSS 代码作为输入，然后输出为其他内容（例如添加前缀的 CSS 代码，或 JavaScript 代码）。

🧑‍🏫图解说明

SCSS 代码

.container {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
    &-header {
        color: red;
    }
    &-content {
        color: yellow;
    }
    &-footer {
        color: blue;
    }
}

经过 SCSS 预处理器转换成普通 CSS 代码

.container {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}
.container-header {
    color: red;
}
.container-content {
    color: yellow;
}
.container-footer {
    color: blue;
}

经过 PostCSS 的 Autoprefixer 后处理器添加前缀，以便适配不同浏览器

.container {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}
.container-header {
    color: red;
}
.container-content {
    color: yellow;
}
.container-footer {
    color: blue;
}

❤️主流 CSS 处理器

预处理器

SASS 英文 英文官网 推荐

SASS 中文 中文翻译 滞后

LESS 英文 英文官网

Stylus 英文 英文官网

Stylus 中文 中文翻译

后处理器

PostCSS 英文 英文官网

PostCSS 中文 中文翻译

📚推荐书籍

Sass for Beginners: The Ultimate Beginner's Guide to Learn Sass Step by Step