[翻译]PostCSS简介

许多开发人员花时间在使用CSS的预处理器上如less,sass和stylus。这些工具已经成为Web开发的重要组成部分。写一个网站的样式,不使用嵌套,变量或混入等功能不多见。它们每一个都是很是实用的,让咱们退后一步看,考虑以这种方式使用预处理器是否是最好的办法。
传统的预处理器的问题:css

  • 不能扩展。不管您选择哪一种预处理,都被限制到设定的,它提供的功能。若是您须要在其上构建功能,在构建过程当中,你须要添加一个单独的步骤。若是你想写一个扩展,只能针对你本身的。
  • 不能剔除任何功能。有些预处理器提供诸如sass的@extend 功能,能够完全不使用它们。当你不使用它们,却没法删除该工具的这个功能,减小代码的体积。
  • 不兼容的CSS标准。每一个预处理器已经有了本身的标准。但并非W3C标准,这意味着它们不会被新的W3C标准兼容。

下面要介绍的PostCSS,就是解决以上问题的工具。html

什么是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解决咱们前面列出的问题?node

  • 每一个插件单独安装。选择须要插件以及顺序应用。一般状况下,插件可使用另一些设置选项进行配置。
  • 您能够编写本身的插件。每一个插件PostCSS接收解析CSS做为输入参数,分析或修改它,并以一样的方式返回。这意味着,插件不须要处理解析CSS和转换回成一个字符串。所以很容易构建本身的插件。
  • PostCSS能够用来写出符合W3C的CSS。有不少插件,旨在实现新的W3C规范功能。这将使你写一个标准的对将来版本兼容的css代码。

怎样使用PostCSS

安装PostCSS,咱们不会进入太多有关设置的细节。咱们会在命令行直接运行PostCSS。你能够在在Github的页面上找到各构建工具中如何使用PostCSS工具的详细信息。git

安装PostCSS

PostCSS经过node与npm安装,请确保已经在开始前的已经安装了node。把PostCSS安装在全局,代码以下:github

npm install -g postcss-cliweb

运行下面代码,查看是否安装上:npm

postcss --helpjson

在屏幕会给你打出postcss接受的参数列表。也能够参照postcss-CLI documenationgulp

运行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的做用。

postcss-custom-properties插件

postcss-custom-properties插件的做用,实现对支持W3C自定义属性规范(又名本地变量)。在选择器的自定义属性为任意值,并在样式表其余地方引用。
这和less,sass中变量的功能相同:存放值和消除代码重复。主要的区别是,做用域是有点不一样; 相似于常规属性,CSS自定义属性沿元素级联传播,而不是块级范围。
下面是这个插件如何工做的一个例子。代码:

:root {
--container-width: 800px;}

.container {
width: var(--container-width);}

将编译为:

.container {
width: 800px;}

postcss-custom-selectors插件

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

相关文章
相关标签/搜索