zoukankan      html  css  js  c++  java

  • [译]PostCSS介绍

    PostCSS介绍

    原文链接：http://www.smashingmagazine.com/2015/12/introduction-to-postcss/

    转自：http://www.zcfy.cc/article/81

    CSS的发展与所有语言的发展一样，都有一个迭代的过程。伴随着每一个主要版本的发布，我们都可以获得新的特性和语法帮忙我们更好的完成样式。CSS3 介绍了很多新的特性，可以让我们设计交互，之前我们都是通过javascript来实现交互。每一天都会有新工具出现，让我们可以更灵活地表达样式。

    PostCSS就是最近才出现的这么一个工具PostCSS。PostCSS的目标是通过自定义插件和工具这样的生态系统来改造CSS。与Sass和Less这些预编译器相同的原则，PostCSS把扩展的语法和特性转换成现代的浏览器友好的CSS。

    如何实现？JavaScript。

    JavaScript转换我们的样式比其他处理器快。使用Gulp或Grunt的task-runner工具，我们可以通过构建过程转换样式，就像Sass和Less的编译。像React和AngularJS这样的库和框架，允许我们可以在JavaScript中直接写CSS，为我们的样式打开了一扇使用JavaScript转换的大门。

    PostCSS的历史

    PostCSS作为使用JavaScript处理CSS的方法被推出，它的开发者是Andrey Sitnik, Autoperfixer的作者。PostCSS本身只是一个API，当使用其庞大的插件生态系统时，可以为我们提供强大的处理能力。生成的Source maps可以方便我们的调试，抽象语法树（AST）的存在可以帮忙我们理解代码是如何被转换的。

    由于PostCSS使用Node.js框架，无论语言还是工具可以按需修改和定制。其他工具如Sass和LESS就会因为系统能力的限制，只可以使用编译器可用的方法。

    由于其使用的API，PostCSS允许我们为可能需要的任何功能，创建自定义的插件和工具。模块化平台的设计使得工具中立，使得我们只需要关注项目需要的功能。PostCSS对语言格式不关心，接受不同预处理器的语法风格，像Sass和LESS，如果有必要的话。

    模块化的好处

    大多数开发人员很少从头开始一个项目。很多都是以Sass模板开始，在指定项目中使用Sass模板提供的variables，mixins，functions。我们为functions,mixins,表格系统，通用工具提代独立的样式表，从而使开发更容易。到了最后，我们最终会有10个或更多个样式文件用来保证开发的条理性。

    维护Sass或Less片断的库是一个艰巨的任务，会留下一下臃肿的项目。很多项目中没有用到mixins和funcitons，只是做为"以防万一"的代码包含进来。PostCSS很容易安装，即插即用的模块，使有独特需求的项目开发过程更灵活。

    PostCSS把我们产品中的样式表中用来创建funtions,utities和mixins的代码移出来包装成插件。现在对于每个项目，我们可以通过构建工具中包含对应插件就可以使用这些工具。

    PostCSS FontPath插件就可以见证这种方式的优势。在使用Sass时，我们可以在文件中包含进一个mixin来自定义网页字体，因此我们创建了一个@font-face的标签。

    1. @mixin importfont($font-family,$font-filename,$font-weight:normal,$font-style:normal,$font-stretch:normal){
    2. @font-face{
    3. font-family:'#{$font-family}';
    4. src:url('#{font-filename}.eot');
    5. src:url('#{font-filename}.woff') format('woff'),
    6. url('#{$font-filename}.ttf') format('truetype');
    7. font-weight:$font-weight;
    8. font-style:$font-style;
    9. font-stretch:$font-stretch;
    10. }
    11. }
    12. @include importfont('mission script','fonts/mission-script-webfont',300);

    在我们的项目中使用PostCSS FontPath 插件，我们就不再需要像上面那样包含Sass mixins了。在我们的CSS中写入下面的代码，PostCSS会通过Grunt或Gulp把它转换成我们需要的。

    1. @font-face{
    2. font-family:'My Font';
    3. font-path:'/path/to/font/file';
    4. font-weight:normal;
    5. font-style:normal;
    6. }

    在写这篇文章时，PostCSS已经有超过100个社区插件，允许诸如未来的CSS语法，快捷键，工具和语言的扩展。PostCSS除了是一个'酷'的工具，它的用户群里也有WordPress,谷歌和推特团队这些重量级的用户。

    添加PostCSS到你的工作流

    因为PostCSS是用JavaScript编写的，我们可以在项目中使用像Gulp和Grunt这样的Task runner来转换CSS。下面的教程演示如何把PostCSS使用Gulp或Grunt合并到你的工作流。使用这两种工具不是至关重要的，这只是个人喜好或哪一个更合适项目的问题。

    注意：Gulp和Grunt完整版的工具放在GitHub可用 。你可以随时使用它做为初始模板，并且可以根据需要扩展它。

    使用GULP设置POSTCSS

    如果你对Gulp不熟悉，我推荐你阅读Callum Macrae写的"基于Gulp构建"做个初步了解，并把这个工具跑起来。

    在终端执行npm i gulp-postcss -D命令，在你的项目中安装PostCSS模块。

    在项目下的Gulpfile.js中请求我们安装的PostCSS模块，然后在任务中使用它。在这里，一定要更新开发文件的路径和输出转换文件的目录。

    1. var postcss = require('gulp-postcss');
    2. gulp.task('styles',function(){
    3. return gulp.src('path/to/dev/style.css')
    4. .pipe(postcss([]))
    5. .pipe(gulp.dest('path/to/prod'))
    6. });

    在命令行输入gulp styles执行该任务。

    使用GRUNT设置POSTCSS

    注意：如果你对Grunt不熟悉，我推荐你通过阅读Mike Cunsolo写的"Grunt入门和实践"来熟悉Grunt的使用。

    在终端执行npm i grunt-postcss -D命令，在你的项目中安装PostCSS模块。

    一旦在系统里安装了该插件，你就可以像下面这样，使用它在Gruntfile里创建一个任务了。一定记得更新cwd和dest的值来反映你的应用程序结构。

    1. module.exports = function(grunt){
    2. grunt.initConfig({
    3. pkg:grunt.file.readJSON('package.json'),
    4. styles:{
    5. options:{
    6. processors:[]
    7. },
    8. dist:{
    9. files:[{
    10. expand:true,
    11. cwd:'dev/',
    12. src:['**/*.css'],
    13. dest:'prod/'
    14. }]
    15. }
    16. }
    17. });
    18. // 加载post-css
    19. grunt.loadNpmTasks("grunt-postcss");
    20. };

    在命令行输入grunt styles执行该任务。

    安装插件

    使用PostCSS自己并不完全是强大的，它的强大依赖于插件。你可能已经注意到在上面Gulp和Grunt的实现中，任务声明中有空的数组。在这些数组中我们可以引入社区开发的PostCSS插件。

    核准的PostCSS插件列表可以在PostCSS GitHub页 查看，这些插件像所有的NPM包一样，可以通过命令行安装。许多插件只能做为PostCSS的扩展，对于你使用的构建工具是不可知的。比如，我们将要安装的PostCSS Focus 插件,它将为每一个hover状态添加:focus。

    下面例子中使用的所有插件，我们需要使用命令行和NPM在我们的项目中安装这些包文件。

    POSTCSS插件安装示例

    npm i postcss-focus -D

    插件可以直接传递到方法；然而，为了代码的整洁，我们可以构造一个数组作为参数将其传递给方法。在这个数组里，我们包含必要的require语句，该语句返回插件，接着立即调用返回的插件。如果你想深入了解这个概念，推荐阅读Ryan Christiani写的Functions as First-Class Citizens in JavaScript这篇文章。

    1. require('postcss-focus')()

    Grunt使用新创建的processorArray后的代码，如下：

    1. var processorArray = [
    2. require('postcss-plugin')()
    3. ];
    4. // Snipped for brevity
    5. styles:{
    6. options:{
    7. processors:processorArray
    8. },
    9. dist:{
    10. src:'path/to/dev/style.css',
    11. dest:'path/to/prod/style.css'
    12. }
    13. }

    Gulp修改后的代码如下：

    1. var processorArray = [
    2. require('postcss-plugin')()
    3. ];
    4. gulp.task('styles',function(){
    5. gulp.src('path/to/dev/style.css')
    6. .pipe(postcss(processorArray))
    7. .pipe(gulp.dest('path/to/prod'))
    8. });

    插件

    一旦我们安装一个插件和构建工具准备编译代码，我们就可以使用PostCSS和插件的功能。首先我们要做的是在开发目录下新建一个.css扩展的文件。

    "等等！一个CSS文件？"没错，一个CSS文件。因为使用PostCSS转换我们的CSS，我们不需要特定的语法，只需要使用传统的CSS就可以。如果你熟悉预处理器，离开了.sass,.scss,.styl或.less文件回归到.css，你会觉得不自然。但是，事实上，它带来的不是转换而是转变。

    我们可以分别执行grunt styles和gulp styles使Task runner运行，利用我们新安装的PostCSS插件来处理我们的样式。我们的开发样式文件将通过PostCSS插件被处理，然后输出到我们指定的生产目录。

    以下是一些值得注意的插件，包括这些插件的安装和使用说明，在你开始使用PostCSS时会有一些帮助。

    自动加前缀

    编写兼容众多浏览器和设备的样式是一种痛苦，需要添加供应商前缀保持最新的属性和值更是一种挑战。所幸，AutoPrefixer 可以找出何时何地需要提供前缀。该插件可以让我们在样式中使用新的特性和属性，为属性和值添加前缀由它来完成。

    这里是如何通过命令行安装这个插件：

    1. npm i autoprefixer -D

    当我们在数组中添加一个插件时，我们需要提供一个对象，该对象提供项目支持的浏览器范围的数组。可以提供的选项列表可以在Browserslist Github Account中查看。

    我们在处理器中添加一个Autoprefixer插件

    1. var processorsArray = [
    2. // snipped for brevity
    3. require('autoprefixer')({browsers:['last 2 versions','ie 6-8','Firefox > 20']})
    4. ]

    根据设定的目标不同，样式表中相应的CSS属性和值上会自动加上适当的前缀。

    这是开发的CSS:

    1. .item{
    2. display:flex;
    3. flex-flow:row wrap;
    4. }

    这里是转换后的输出：

    1. .item{
    2. display:-webkit-flex;
    3. display:-ms-flexbox;
    4. display:-webkit-box;
    5. display:flex;
    6. -webkit-flex-flow:row wrap;
    7. -ms-flex-flow:row wrap;
    8. flex-flow:row wrap;
    9. }

    利用CSSNEXT使用未来语法

    CSS4不久将要来到我们身边，CSS4将带来一些新的特性，如本地变量,自定义选择器 和新的伪类链接 。在写这篇文章时，这些新特性在所有浏览器都不支持，但是它们将在现代浏览器中实现规范得到了批准。

    CSSNext 可以把任意的CSS4特征或属性转换成浏览器可以解析的CSS3属性。这个工具可以单独使用，也可以做为PostCSS的插件使用。我们接着把它也添加到processorsArray，processorsArray里已经包含了其他我们需要的PostCSS插件。

    通过命令行安装CSSNext插件，如下：

    npm i cssnext -D

    (译者注：cssnext官网正式更名为postcss-cssnext,安装时请使用npm i postcss-cssnext,估计是避免与CSSNEXT混淆)

    然后将它添加到你的处理器中：

    1. var processorsArray = [
    2. // snipped for brevity
    3. require('cssnext')()
    4. ]

    现在，在你的生产代码中可以写CSS4的特性，PostCSS会通过任务管理器转换这些语法，从而被今天的浏览器支持。再用开发文件中的CSS替换这些转换后的代码即可。

    这里是开发的CSS:

    1. // 自定义变量
    2. :root{
    3. --linkColour:purple;
    4. }
    5. a{
    6. color:var(--linkColour);
    7. }
    8. // 自定义媒体查询范围
    9. @custom-media --only-medium-screen (width>=500px) and (width/
    10. @import "partials/_base.css";
    11. /* 混入（Mixins） */
    12. @define-mixin square $dimension{
    13. width:$dimension;
    14. height:$dimension;
    15. }
    16. /* 嵌套，变量和混入 */
    17. .button{
    18. @mixin square 200px;
    19. background:$green;
    20. &:hover{
    21. background:$blue;
    22. }
    23. }

    这里是转化后的输出：

    1. .square{
    2. background:#0000ff;
    3. border-radius:10px;
    4. }
    5. .button{
    6. width:200px;
    7. height:200px;
    8. background:#00ff00;
    9. }
    10. .button:hover{
    11. background:#0000ff;
    12. }

    如果你想探索CSSNext更多的功能，可以访问playground 这个网站，在这个网站上你可以尝试更多CSSNext支持的CSS4特性。

    SASS语法

    如果Sass是你的首选预处理语言，不用担心：你可以在PostCSS中使用Sass的语法和Sass的工具。传统的CSS不支持变量，嵌套和引用，使用插件比如PreCSS 就可以让我们使用这些特性，这样我们就可以在传统的样式文件中使用Sass的语法。

    如果通过命令行将插件添加到构建里，参考上面的演示将该包添加到processorsArray数组里，这样我们就可以立即使用Sass语法了。如果我们从Sass切换到了PostCSS,你需要把文件的扩展改成.css,并且在你的Task runner中立即执行。

    通过命令行安装PreCSS,如下：

    1. npm i precss -D

    把这个插件添加到你的处理器中：

    1. var processorsArray = [
    2. // snipped for brevity
    3. require('precss')()
    4. ];

    这里是开发的CSS：

    1. /* 变量 */
    2. $blue:#0000ff;
    3. $green:#00ff00;
    4. $radius:10px;
    5. .square{
    6. background:$blue;
    7. border-radius:$radius;
    8. }
    9. /* 引用 */
    10. @import "partials/_base.css";
    11. /* 混入（Mixins） */
    12. @define-mixin square $dimension{
    13. width:$dimension;
    14. height:$dimension;
    15. }
    16. /* 嵌套，变量和混入 */
    17. .button{
    18. @mixin square 200px;
    19. background:$green;
    20. &:hover{
    21. background:$blue;
    22. }
    23. }

    这里是转化后的输出：

    1. .square{
    2. background:#0000ff;
    3. border-radius:10px;
    4. }
    5. .button{
    6. width:200px;
    7. height:200px;
    8. background:#00ff00;
    9. }
    10. .button:hover{
    11. background:#0000ff;
    12. }

    利用社区插件扩展CSS

    PostCSS的能力在于社区插件，插件可以帮忙我们更加有效的编写代码。这些插件给我们提供了编写代码更快捷的方式，或者至少可以使用更容易的方法来实现创造性的样式。借助PostCSS API,这些插件允许我们在项目中可以自定义属性，选择器和值，便得我们可以更有效的编写样式，尽量少的使用搜索。

    QUANTITY QUERIES

    数量查询功能非常强大。他们允许我们在CSS中计算元素数量 ，从而基于兄弟元素的数量应用样式。在今天，你可以在CSS中使用数量查询，因为数量查询依赖一些先进的CSS选择器，所以在写这些选择器时有点棘手。在线工具QQ的存在可以帮忙我们完成这样的查询，我们也可以在样式中直接使用PostCSS自定义选择器。

    像其他插件的安装一样，使用命令行安装Quantity Queries插件，如下：

    1. npm i postcss-quantity-queries -D

    并且在你的处理器中添加这个插件：

    1. var processors = [
    2. // Snipped for brevity
    3. require('postcss-quantity-queries')()
    4. ];

    一旦这个插件安装好，你就可以只通过这个插件自定义选择器和变量，基于匹配的元素应用样式了。

    这里是开发的CSS:

    1. // "至少"数量的兄弟元素应用样式
    2. .container > .item:at-least(5){
    3. background:blue;
    4. }
    6. // "最多"数量的兄弟元素应用样式
    7. .item > a:at-most(10){
    8. color:green;
    9. }
    10. // "范围"数量的兄弟元素应用样式
    11. .gallery > img:between(4,7){
    12. width:25%;
    13. }
    14. // "精确提供项"的兄弟元素应用样式
    15. .profiles:exactly(4){
    16. flex:1 0 50%;
    17. }

    这里是转化后的输出：

    1. .container > .item:nth-last-child(n+5),
    2. .container > .item:nth-last-child(n+5) ~ .item{
    3. background:blue;
    4. }
    5. .item > a:nth-last-child(-n+10):first-child,
    6. .item > a:nth-last-child(-n+10):first-child ~ a{
    7. color:green;
    8. }
    9. .gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child,
    10. .gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child ~ img{
    11. width:25%;
    12. }
    13. .profiles:nth-last-child(4):first-child,
    14. .profiles:nth-last-child(4):first-child ~.profiles{
    15. flex:1 0 50%;
    16. }

    利用SHORT扩展简写属性

    我们在写样式时，偶尔会遇到一些属性的语法让你说，"应该能短一些"。所幸，Short插件可以帮助我们做到这一点：写样式更加有逻辑性。它让我们可以为position和size写简写属性，就像background和font属性可以凝聚成一个单一的声明。

    通过PostCSS API，简写声明被转换成浏览器易解析的样式，允许一个简洁开发样式表和一个更有组织的生产样式表。

    使用命令行安装Short:

    1. npm i postcss-short -D

    并且在你的处理器中添加这个插件：

    1. var processors = [
    2. require('postcss-short')()
    3. ];

    text属性包括这些输入属性：color,font-style,font-variant,font-weight,font-stretch,text-decoration,text-align,text-rendering,text-transform,white-space,font-size,line-height,letter-spacing,word-spaceing和font-family。

    这里是开发的CSS：

    1. p {
    2. text:300 uppercase dimgrey center 1.6rem 1.7 .05em;
    3. }

    这里是转化后输出的CSS：

    1. p{
    2. color:dimgrey;
    3. font-weight:300;
    4. text-align:center;
    5. text-transform:uppercase;
    6. font-size:25px;
    7. font-size:1.6rem;
    8. line-height:1.7;
    9. letter-spaceing:.05em;
    10. }

    position属性允许top,left,'right',bottom值包含在一个声明中。值的顺序 是顺时针方向。语法中取值从1到4，如果有一个值你想排除，只需使用*星号替换即可。

    这里是开发的CSS：

    1. section{
    2. position: absolute 10px * *;
    3. }
    4. .topNav{
    5. position: fixed 0 * * 0;
    6. }
    7. .modal{
    8. position: fixed 40% 25%;
    9. }

    这里是转化后输出的CSS：

    1. section{
    2. position:absolute;
    3. top:10px;
    4. }
    5. .topNav{
    6. position: fixed;
    7. top:0;
    8. left:0;
    9. }
    10. .modal{
    11. position:fixed;
    12. top:40%;
    13. right:25%;
    14. bottom:40%;
    15. left:25%;
    16. }

    这对我们的行业意味着什么？

    今天使用PostCSS完全有可能获得实惠。就像编译Sass和Less,你可以把PostCSS合并到你的工作流中，通过修改Task runner来处理PostCSS。合并的插件像PreCSS允许你将现有的Sass项目移植到PostCSS，而不需要做任何的语法转化。

    本文撰写之时，关于在什么地方写CSS最好的讨论正在持续。伴随着React 库越来越普及，在组件自身内部写样式，使用JavaScript直接转换CSS进行编译，这种思路正蓄势待发。虽然这仍然是个讨论，但使用PostCSS转换样式确实是一种方法。

    另一个在行业内掀起波澜的项目是CSS模块, 样式作用范围在本地文件，需要使用时直接引用该文件。这个概念在JavaScript圈已经非常流行。随着前端语言之间的界线越来越模糊，比如React和JSX ,CSS和JavaScript结合的能量不容忽视。

    PostCSS通过自定义语法和属性以崭新方式扩展CSS，它的复杂性也将会为试图熟悉这个语言的初学者带来新的挑战。如果在项目中使用PostCSS的是一位年轻的开发者，请多多鼓励他深入了解CSS本身，以及理解PostCSS其实与Sass差不多，都是提高样式编写效率的工具而已。

    今天采用PostCSS

    在接下来的几年里，我们使用CSS的方式将会在许多不同的方面发生改变。每个项目会有不同的需求，我们将不得不调整我们的开发方式。有了PostCSS这样的模块化生态系统，我们就可以根据项目需求选择功能。

    我鼓励你去探索PostCSS的世界，并且探索它所有可用的插件。因为它是一个社区项目，只有人们去使用它并创建新的插件，这个生态系统才会成长壮大。探索更多的插件，可以访问NPM的availabel packages，也可以在PostCSS Playground中测试插件的功能。
  • 相关阅读:
    IDEA激活
    Spring JDBC
    数据库连接池
    JDBC
    10个很实用Linux命令，千万不要错过
    Linux 下如何使用 alias 命令
    Linux 下如何使用 fc 命令
    Linux 下如何修改密码有效期？
    利用 tee 命令调试shell脚本中的管道
    ps 命令显示不完整的问题
  • 原文地址：https://www.cnblogs.com/terrylin/p/5229169.html
Copyright © 2011-2022 走看看