【翻译】PostCSS简介

2024年4月5日 138次阅读 来源: cedrus

许多开发人员花时间在使用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

    原文作者：cedrus
    原文地址: https://segmentfault.com/a/1190000005049076
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞