您好读者。 在学习布局的过程中，您是否学过CSS并想继续前进？ 然后在猫下给你。 注意，很多代码。
在本文中，我将回顾预处理器和后处理器。
我不会详细介绍CSS，这意味着您已经知道。 我将使用
BEM表示法命名类。 另外，我不会深入研究我将要写的所有内容的安装和配置，但是我将留下可供您关注的链接，并亲自学习如何做。
让我们从预处理器开始。
预处理器
什么是CSS上下文之外的预处理器？
维琪知道答案。
CSS上下文中的预处理器是什么？ 在我们的例子中，预处理器是一个程序，该程序接收用预处理器语言编写的代码作为输入，在输出处，我们获得CSS，可以将输入提供给浏览器。
什么是预处理器？ 有几个代表，例如：
Sass （.sass，.scss），
Less （.less）和
Stylys （.stylus）。
同样在预处理器中，可以分别区分
PostCSS （或更确切地说，其SugarSS解析器和PreCSS插件）。 展望未来，我会说是的，PostCSS不仅是后处理器。
我将对Sass的示例进行回顾。 更准确地说，在其新语法-SCSS上，因为它比旧语法更接近CSS。 让我们从CSS所没有的预处理器添加的功能开始，到解决的问题结束。
可能性
变数
//style.scss $color: #fff; span { color: $color; background: $color; } //style.css span { color: #fff; background: #fff; }
变量的有用性很难高估。 现在您可以给颜色赋予有意义的名称（$番茄：rgb（255,99,71）），不通过常量而是通过变量（高度：$ body_height-$ footer_height）等等来计算值。 许多人可能会争辩说CSS中存在变量。 但是
我可以使用说不支持IE（出于明显的原因，这是不希望的）。
套料
//style.scss .chat-area { width: 40%; &__button { // & - ( & = .chat-area) display: inline-block; height:36px; width: 10px; } a { color: red; } } //style.css .chat-area { width: 40%; } .chat-area__button { display: inline-block; height:36px; width: 10px; } .chat-area a { color: red; }
在本文开头，我提到了BEM。 在此示例中，具有chat-area类的元素是一个块。 万一突然需要重命名，现在可以在一个地方进行重命名，如果在一个包含块名称的文件中键入几十个选择器，这将成为例行程序。 我还想指出，这是一种防止输入错误的方法，因为块的名称只被写入一次。
混合蛋白
//style.scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } //style.css .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
Mixins是最难理解的主题之一。 粗略地说，mixin是一个函数，它接受参数并将依赖于这些参数的规则应用于给定的选择器。 在此示例中，边界半径混合已应用于.box选择器
附加功能
//style.scss $color: #202020; h1, h2 { color: lighten($color, 40%); } //style.css h1, h2 { color: #868686; }
基本上，新功能使使用颜色更加容易。 例如，变亮功能-按指定的百分比将颜色变亮（相反，变暗功能）。
解决的问题
模块化
标准
导入的问题在于，它会向服务器创建一个额外的请求，这是一项昂贵的操作。 如果
import立即将所有
导入的文本插入源文件中，那会很好，对吗？
一种或另一种方式是，以前没有预处理器，因此必须以某种方式解决该问题。 例如，您可以将所有代码写入一个文件中。
但是，我们有预处理器，它们将为我们解决此问题。 预处理器会覆盖标准
导入 ，现在，它不再需要服务器，而是按照我的需要将导入插入到源文件中。
//style.scss @import "selector1"; @import "selector2"; //selector1.scss span { color: white; } //selector2.scss div { color: gold; } //style.css div { color: gold; } span { color: white; }
请注意，源文件已转换为一个。 向服务器请求一个静态信息-一个答案。
传承
<sarcasm>我们有类，但是没有继承，怎么办？</ sarcasm>。 现在可以选择所谓的“模板选择器”并将其与其他选择器一起展开。
// style.scss %equal-heights { // height: 100%; } %message { // padding: 10px; } .success { @extend %message; color: green; } .error { @extend %message; color: red; } // style.css .success, .error { padding: 10px; } .success { color: green; } .error { color: red; }
模板选择器的优点在于它们不适合所生成的样式。 代码中不涉及模板equalizer％equal-heights，并且在CSS中没有留下任何痕迹。 选择器％消息以扩展它的选择器的规则形式反映出来。 您可以继承普通的选择器，但最好使用模板选择器，以免产生多余的垃圾。
格式化
编写代码后，需要对其进行格式化（压缩以用于生产）。 您可以在webpack等收集器的帮助下完成此操作，也可以通过标准工具进行操作。
Sass中有4种格式。
//expanded span { color: gold; display: block; } div { color: red; } //nested span { color: gold; display: block; } div { color: red; } //compact span { color: gold; display: block; } div { color: red; } //compressed span{color:gold;display:block}div{color:red}
扩展-最类似于人工编写的代码。
嵌套-近似于旧语法的格式。 可读性不会丢失，但这是一个好莱坞问题。
紧凑-仍保持可读性，但有困难。 用于通过眼睛确定项目中选择器的数量。
压缩-已经完全不可读的格式。 可以删除的所有字符都将被删除。 适合供浏览器使用。
后记
我不了解Sass添加的某些功能。 例如，
循环或
算术运算符的功能 。 我会让他们让您熟悉一下。
后处理器
处理了预处理程序之后，我们继续进行后处理程序。
在Css的上下文中，后处理器本质上与预处理器相同，但是后处理器的输入没有给出用预处理器语言编写的代码，而是css。 即，后处理器是输入为css的程序，输出为css。 尚不清楚为什么有必要这样做。
我将在
PostCSS的操作的一个具体示例上进行
说明 -在CSS上下文中，后处理器是唯一的代表。
开箱即用的CSS实际上对CSS并没有任何作用。 它只是返回在输入中提供给它的文件。 当插件连接到PostCSS时，更改开始。
PostCSS的整个周期可以描述如下：
- 将源文件提供给PostCSS输入并进行解析。
- 插件1做某事
- ...
- 插件n做某事
- 结果将转换为字符串并写入输出文件。
考虑PostCSS生态系统中存在的主要插件
外挂程式
自动前缀
这个插件非常流行，以至于很多人以为他们使用了这个插件，却不使用PostCSS。 他们错了。
//in.css div { display: flex } //out.css div { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex }
Autoprefixer将浏览器前缀添加到您的规则。 最重要的插件之一，始于PostCSS的发展史，无可替代。 您甚至可以说，仅出于此插件的目的而放置PostCss是有意义的。
预设环境
//in.css @custom-media --med (width <= 50rem); @media (--med) { a:hover { color: color-mod(black alpha(54%)); } } //out.css @media (max-width: 50rem) { a:hover { color: rgba(0, 0, 0, 0.54); } }
PostCSS Preset Env添加了仅在CSS开发人员草稿中讨论的功能。 在此示例中，实现了@ custom-media指令以及color-mod函数。 立即开始使用未来的CSS！
CSS模块
所有这些BEM都不适合您，但是类名冲突仍然存在问题吗？ 然后PostCSS提供了另一种解决方案。
//in.css .name { color: gray; } //out.css .Logo__name__SVK0g { color: gray; }
CSS模块根据某种模式（所有内容均可自定义）更改类名称。 现在我们不预先知道类的名称，因为它是动态确定的。 如果我们事先不了解元素，该如何对元素进行分类？ 结合PostCSS，Webpack和ES6，我可以提供以下解决方案：
import './style.css';
现在，我们不仅要导入具有样式的文件（例如，在组件的React文件中）并替换之前已知的值，而且还要导入对象。 该对象的键将是原始选择器，并且值将被转换。 也就是说，在此示例中，样式['name'] ='Logo__name__SVK0g'。
短的
//in.css .icon { size: 48px; } .canvas { color: #abccfc #212231; } //out.css .icon { width: 48px; height: 48px; } .canvas { color: #abccfc; background-color: #212231; }
PostCSS Short为各种规则添加了一堆简化的条目。 代码越来越短，因此出现错误的空间越来越小。 加号增加可读性。
自动重设
//in.css div { margin: 10px; } a { color: blue; } //out.css div, a { all: initial; } div { margin: 10px; } a { color: blue; }
PostCSS自动重置允许我们不要使用所有样式重置来创建单独的文件。 该插件会为所有选择器创建一个大选择器，并在其中放置规则并重置所有样式。 默认情况下，仅使用值initial创建all规则。 与
postcss-initial插件结合使用时很有用，后者将该规则转换为4个屏幕的规则包。 但是，可以像下面这样配置和重置所有内容：
//out.css div, a { margin: 0; padding: 0; } div { margin: 10px; } a { color: blue; }
还记得本文开头所说的PostCSS不仅仅是后处理器吗？
PostCSS-预处理器？
考虑一个解析器和一个插件，之后您将改变对PostCSS的当前看法。
糖糖
//in.sss .parent color: white .parent > .child color: black //out.css .parent { color: white } .parent > .child { color: black }
SugarSS是解析器（不是插件！），作为标准，它基于
缩进而不是大括号。 它具有单独的扩展名“ .sss”。 使用SugarSS编写的代码在样式上与旧的Sass语法相似，但是没有诸如变量，mixin，继承等之类的方法。
您猜下一个插件会添加什么？
精密度
//in.sss $color: black .parent .child color: $color // SugarSS $color: black; .parent { .child { color: $color } } //out.css .parent .child { color: black }
PreCSS只是增加了本文上半部分所介绍的预处理器的功能。
为什么PostCSS现在不是预处理器？
Stylelint
关于
Stylelint的文章已经
很多 。 他之所以参加此评论，是因为他使用PostCSS作为CSS文件行的解析器。 假设我们有这样一个文件。
a { color: rgb(1, 1, 1) } div { color: rgb(0, 0, 0) }
这是当前文件的输出：
2:21 Expected a trailing semicolon declaration-block-trailing-semicolon 6:21 Expected a trailing semicolon declaration-block-trailing-semicolon 7:1 Unexpected missing end-of-source newline no-missing-end-of-source-newline
这个工具的有用性很难被高估。
结论
预处理器添加了CSS中没有的许多新功能。 一旦尝试过，您将几乎无法返回常规CSS。
PostCSS比预处理器更接近原始CSS，但是尽管如此，连接了某些插件后，PostCSS可以具有相同的功能（甚至是相似的语法）。 初学者的排版人员可以排版，甚至不用考虑版面不是纯CSS。 某些插件（例如Autoprefixer）在预处理器世界中没有类似物。
没有人会同时使用预处理器和PostCSS。 该选项对于已经使用预处理器并且可以居住的项目非常好。
对于新项目，我建议仅使用PostCSS。 布局设计器习惯于预处理器语法吗？ 安装PreCSS插件和SugarSS解析器。 需要跨浏览器兼容性吗？ 安装Autoprefixer插件。 不再需要跨浏览器的兼容性（例如，您的项目被包裹在电子中，并且变成了桌面）？ 只需卸载Autoprefixer！ 使用PostCSS，您可以像构造函数一样，完全构建项目所需的内容。