摘要：许多开发人员花时间在使用的预处理器上如和。传统的预处理器的问题不能扩展。有些预处理器提供诸如的功能，可以彻底不使用它们。每个预处理器已经有了自己的标准。如下它被翻译成嗯我从来没有说过所有的插件都是有用的结束语和预处理器是伟大的。
许多开发人员花时间在使用CSS的预处理器上如less,sass和stylus。这些工具已经成为Web开发的重要组成部分。写一个网站的样式，不使用嵌套，变量或混入等功能很少见。它们每个都是非常实用的，让我们退后一步看，考虑以这种方式使用预处理器是不是最好的办法。
传统的预处理器的问题：
不能扩展。无论您选择哪种预处理，都被限制到设定的，它提供的功能。如果您需要在其上构建功能，在构建过程中,你需要添加一个多带带的步骤。如果你想写一个扩展，只能针对你自己的。
不能剔除任何功能。有些预处理器提供诸如sass的@extend 功能，可以彻底不使用它们。当你不使用它们，却无法删除该工具的这个功能，减少代码的体积。
自己的CSS标准。每个预处理器已经有了自己的标准。但并不是W3C标准，这意味着它们不会被新的W3C标准兼容。
下面要介绍的PostCSS，就是解决以上问题的工具。
什么是PostCSS？
PostCSS不是预处理器; 它不改变CSS。它本身并不完成css工作。它的作用是提供一个CSS解析器和创建可以分析，测试，处理资源，优化，创建回调，和传输给其它解析CSS框架的插件的框架。PostCSS把CSS解析成抽象语法树（AST），通过一系列的插件，然后重新编译成一个字符串。如果你熟悉JavaScript工具，那么可以把PostCSS类比为CSS的Babel。目前有超过200个PostCSS插件，其中有许多在的PostCSS GitHub的页上列出，而另一些可以在PostCSS 的postcss.parts目录中找到。PostCSS可以集成在大多数构建工具，包括gulp，grunt，WebPack或NPM。那么，如何用PostCSS解决我们前面列出的问题？
每个插件多带带安装。选择需要插件以及顺序应用。通常情况下，插件可以使用另外一些设置选项进行配置。
您可以编写自己的插件。每个插件PostCSS接收解析CSS作为输入参数，分析或修改它，并以同样的方式返回。这意味着，插件不需要处理解析CSS和转换回成一个字符串。因此很容易构建自己的插件。
PostCSS可以用来写出符合W3C的CSS。有很多插件，旨在实现新的W3C规范功能。这将使你写一个标准的对未来版本兼容的css代码。
怎样使用PostCSS
安装PostCSS，我们不会进入太多有关设置的细节。我们会在命令行直接运行PostCSS。你可以在在Github的页面上找到各构建工具中如何使用PostCSS工具的详细信息。
安装PostCSS
PostCSS通过node与npm安装，请确保已经在开始前安装了node。把PostCSS安装在全局，代码如下：
npm install -g postcss-cli
运行下面代码，查看是否安装上：
postcss --help
在屏幕会给你打出postcss接受的参数列表。也可以参照postcss-CLI documenation。
运行PostCSS
PostCSS安装成功，下面做一个小DEMO。创建styles.css文件，并添加一些CSS样式。例如，定义一个Flexbox的容器：
.container {
display: flex
}
Flexbox需要浏览器前缀才能在对应的浏览器上运行。如果不想手动维护，Autoprefixer是PostCSS插件，完成自动维护的工作。它会基于can i use所提供的信息,自动添加供应商前缀。下面将先放你如何使用Autoprefixer维护浏览器前缀。
安装Autoprefixer，运行下面命令：
npm install -g autoprefixer
接下来，切换到项目文件夹，创建一个DIST文件夹，并把处理好的css放到里面：
mkdir dist
然后运行PostCSS：
postcss -u autoprefixer styles.css -d dist
上面命令的意思是：运行Autoprefixer 处理styles.css并输出到DIST / styles.css。现在，打开DIST / Styles.css中会看到所有需要的浏览器前缀的css都已经加上：
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;}
运行PostCSS -w标识，会启动一个watcher监听进程，当styles.css的文件被修改，则会自动处理。
插件配置我们可以根据需要来配置Autoprefixer的浏览器前缀。通过设置browsers选项来完成。当通过命令行运行PostCSS，插件配置需要在.json文件中定义，例如，postcss.json。让我们在当前文件夹中创建文件，并配置Autoprefixer支持的浏览器的最新的2个版本。
{
"autoprefixer": {
"browsers": ["last 2 versions"]
}}
现在可以重新运行PostCSS并根据新的配置文件监听：
postcss styles.css -u autoprefixer -c postcss.json -d dist -w
启用source map
source map是用于调试编译CSS必不可少的。PostCSS可以生成输出文件内联source map，通过设置--map选项（或-m标识）。
更多postcss插件
PostCSS有一个惊人的插件库，包括测试，质量检查，回退，老的浏览器支持，内联资源,雪碧图生成，优化，新的语法支持，以及未来的CSS特性。正如前面提到的，你可以在插件的结构目录postcss.parts中找到。
做一个demo，使用几个插件，展示一下PostCSS的作用。
CSS变量的自定义属性插件
postcss-custom-properties插件的作用，实现对支持W3C自定义属性规范（又名本地变量）。在选择器的自定义属性为任意值，并在样式表其他地方引用。
这和less,sass中变量的功能相同：存放值和消除代码重复。主要的区别是，作用域是有点不同; 类似于常规属性，CSS自定义属性沿元素级联传播，而不是块级范围。
下面是这个插件如何工作的一个例子。代码：
:root {
--container-width: 800px;}
.container {
width: var(--container-width);}
将编译为：
.container {
width: 800px;}
自定义选择器插件
postcss-custom-selectors插件实现了自定义选择器规范。可以预先定义选择器，并在后面引用它们。例如，我们可以保存所有标题的一个选择器，并重新使用它作为一个变量：
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
:--headings {
color: mediumblue;}
这将编译如下：
h1,
h2,
h3,
h4,
h5,
h6 {
color: mediumblue;}
俄罗斯样式表插件
曾经想学习俄语，但写CSS太忙？不用担心，现在可以用俄罗斯语写CSS啦！只需使用俄语样式插件。如下：
h1 {
размер-шрифта : 20 пикселей ;
цвет : красный ;
цвет-фона : белый ;
вес-шрифта : жирный ; }
它被翻译成：
h1 {
font-size: 20px;
color: red;
background-color: white;
font-weight: bold;}
嗯......我从来没有说过所有的插件都是有用的！
结束语
less和sass预处理器是伟大的。很大程度改善了我们的开发过程。但现在，停下来，重新思考以后的开发，这些工具是否还是最好的选择。
我们不只是需要新的功能来写样式，我们还需要模块化，更多的新标准，以及灵活的构建进程。PostCSS也是这样做的，它可能会使CSS世界的游戏规则改变。
原文：An Introduction to PostCSS
原文链接：http://www.sitepoint.com/an-introduction-to-postcss/?utm_source=sitepoint&utm_medium=relatedinline&utm_term=html-css&utm_campaign=relatedauthor
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115216.html
摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...
摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...
摘要：代码质量这个术语对于程序员来说并不陌生。在本文中，我们将探讨我们如何能够利用帮助我们，保持我们的代码质量更高。怎样使用在这篇文章中，我们重点介绍几个插件，可以帮助我们提高代码质量。使用相当简单的。这两个插件可用于代码分析。 代码质量这个术语对于程序员来说并不陌生。毕竟，每个开发人员都知道，代码只是能工作是不够的。它还应该具备其他要素：它应该是可读的，良好的格式和一致性。它也应该符合一些...
摘要：前端日报精选浮点数精度之谜前端面试必备基本排序算法从贺老微博引出的遍历器加速那些奥秘进阶之深入理解数据双向绑定全栈天中文深入理解笔记用模块封装代码前端架构经验分享周二放送自制知乎专栏译在大型应用中使用的五个技巧掘金开发指南众成 2017-08-02 前端日报 精选 JavaScript 浮点数精度之谜前端面试必备——基本排序算法从贺老微博引出的遍历器（Iterators）加速那些奥秘J...
摘要：前端日报精选精读高阶组件知乎专栏是如何重新定义前端开发的知乎专栏为您的性能选择最佳的引擎知乎专栏中的尺寸单位掘金一种生成雪碧图的懒惰姿势中文第期编写现代代码周刊第期的平凡之路我们到底可以通过多少种方式修改元素样式掘金 2017-06-18 前端日报 精选 精读 React 高阶组件 - 知乎专栏React 是如何重新定义前端开发的 - 知乎专栏为您的 Node 性能选择最佳的 JS 引...
阅读 1605·2019-08-30 13:04
阅读 2153·2019-08-30 12:59
阅读 1741·2019-08-29 18:34
阅读 1824·2019-08-29 17:31
阅读 1217·2019-08-29 15:42
阅读 3477·2019-08-29 15:37
阅读 2821·2019-08-29 13:45
阅读 2740·2019-08-26 13:57
