PostCSS_html/css_WEB-ITnose の概要

CSS の開発には、すべての言語の開発と同様、反復的なプロセスが必要です。メジャー バージョンがリリースされるたびに、スタイルをより完成させるのに役立つ新しい機能と構文を入手できます。 CSS3 には、インタラクションの設計を可能にする多くの新機能が導入されています。以前は、JavaScript を使用してインタラクションを実現していました。スタイルをより柔軟に表現できる新しいツールが日々登場しています。

PostCSS は最近登場したばかりのツールです。 PostCSS は、カスタム プラグインとツールのエコシステムを通じて CSS を変革することを目的としています。 Sass や Less などのプリコンパイラーと同じ原則に基づいて動作する PostCSS は、拡張された構文と機能を最新のブラウザー フレンドリーな CSS に変換します。

実装方法? JavaScript。

JavaScript は他のプロセッサよりも速くスタイルを変換します。 Gulp または Grunt のタスクランナー ツールを使用すると、Sass and Less のコンパイルと同様に、ビルド プロセスを通じてスタイルを変換できます。 React や AngularJS などのライブラリとフレームワークを使用すると、JavaScript で CSS を直接記述することができ、スタイルに JavaScript 変換を使用できるようになります。

PostCSS の歴史

PostCSS は、JavaScript を使用して CSS を処理する方法として導入されました。その開発者は、Autoperfixer の作者である Andrey Sitnik です。 PostCSS 自体は、プラグインの広大なエコシステムを使用する際に多くの処理能力を提供する単なる API です。生成されたソース マップはデバッグを容易にし、抽象構文ツリー (AST) の存在はコードがどのように変換されるかを理解するのに役立ちます。

PostCSS は Node.js フレームワークを使用するため、言語とツールの両方を必要に応じて変更およびカスタマイズできます。 Sass や LESS などの他のツールは、システム機能の制限により、コンパイラーで利用可能なメソッドのみを使用できます。

PostCSS を使用する API のおかげで、必要な機能に合わせたカスタム プラグインやツールを作成できます。モジュラー プラットフォームの設計により、ツールに依存しないため、プロジェクトに必要な機能のみに集中できます。 PostCSS は形式に依存せず、必要に応じて Sass や LESS などのさまざまなプリプロセッサの構文スタイルを受け入れます。

モジュール化の利点

ほとんどの開発者がプロ​​ジェクトをゼロから開始することはめったにありません。多くは Sass テンプレートから開始し、指定されたプロジェクトで Sass テンプレートによって提供される変数、ミックスイン、関数を使用します。開発を容易にするために、関数、ミックスイン、フォーム システム、および共通ツールに独立したスタイルシートを提供します。最終的には、開発を整理するために 10 以上のスタイル ファイルが作成されます。

Sass 以下の作品のライブラリを維持するのは大変な作業であり、プロジェクトが肥大化する可能性があります。ミックスインと関数は多くのプロジェクトでは使用されませんが、「念のため」のコードとして含まれています。 PostCSS はプラグ アンド プレイ モジュールを使用して簡単にインストールできるため、独自のニーズを持つプロジェクトに対して開発プロセスをより柔軟に行うことができます。

PostCSS は、関数、ユーティリティ、ミックスインの作成に使用されるコードを製品のスタイル シートから移動し、プラグインにパッケージ化します。これで、プロジェクトごとに、ビルド ツールに対応するプラグインを含めることで、これらのツールを使用できるようになります。

PostCSS FontPath プラグインは、このアプローチの利点を実証できます。 Sass を使用する場合、Web フォントをカスタマイズするためにファイルにミックスインを含めることができるため、@font-face タグを作成します。

そうですか

私たちのプロジェクトに PostCSS FontPath プラグインを追加すると、上記のような Sass mixin を含める必要がなくなりました。 CSS に次のコードを記述すると、PostCSS が Grunt または Gulp を通じて必要なものに変換します。

すごいです

この記事の執筆時点では、PostCSS 用のコミュニティ プラグインが 100 を超えており、CSS 構文、ショートカット、ツール、言語の将来の拡張などを可能にします。 PostCSS は「クールな」ツールであることに加えて、そのユーザー ベースには WordPress、Google、Twitter チームなどのヘビーユーザーもいます。

ワークフローに PostCSS を追加します

PostCSS は JavaScript で記述されているため、Gulp や Grunt などのタスク ランナーを使用してプロジェクト内の CSS を変換できます。次のチュートリアルでは、Gulp または Grunt を使用して PostCSS をワークフローに組み込む方法を示します。どちらのツールを使用するかは重要ではありません。それは単に個人的な好みの問題、またはどちらがプロジェクトにより適しているかの問題です。

注: Gulp と Grunt の完全バージョンは GitHub で入手できます。これはいつでも初期テンプレートとして使用でき、必要に応じて拡張できます。

GULP を使用して POSTCS をセットアップする

Gulp に詳しくない場合は、Callum Macrae 著の「Building with Gulp」を読んで予備知識を取得し、このツールを実行することをお勧めします。

ターミナルで npm i gulp-postcss -D コマンドを実行して、プロジェクトに PostCSS モジュールをインストールします。

プロジェクトの下の Gulpfile.js にインストールした PostCSS モジュールをリクエストし、タスクで使用します。ここで、開発ファイルへのパスと出力変換ファイルのディレクトリを必ず更新してください。

@mixin importfont($font-family,$font-filename,$font-weight:normal,$font-style:normal,$font-stretch:normal){  @font-face{        font-family:'#{$font-family}';        src:url('#{font-filename}.eot');          src:url('#{font-filename}.woff') format('woff'),          url('#{$font-filename}.ttf') format('truetype');          font-weight:$font-weight;          font-style:$font-style;          font-stretch:$font-stretch;      }}  @include importfont('mission script','fonts/mission-script-webfont',300);

このタスクを実行するには、コマンド ラインに gulp スタイルを入力してください。

GRUNT を使用して POSTCSS をセットアップする

注: Grunt に詳しくない場合は、Mike Cunsolo 著の「Getting Started with Grunt and Practice」を読んで Grunt の使用に慣れることをお勧めします。

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

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

module.exports = function(grunt){    grunt.initConfig({        pkg:grunt.file.readJSON('package.json'),        styles:{            options:{                processors:[]            },            dist:{                files:[{                    expand:true,                    cwd:'dev/',                    src:['**/*.css'],                    dest:'prod/'                }]            }          }    });      // 加载post-css      grunt.loadNpmTasks("grunt-postcss");  };  

在命令行输入 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这篇文章。

    require('postcss-focus')()  

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

    var processorArray = [        require('postcss-plugin')()    ];      // Snipped for brevity    styles:{        options:{            processors:processorArray        },        dist:{            src:'path/to/dev/style.css',            dest:'path/to/prod/style.css'        }      }   

Gulp修改后的代码如下：

var processorArray = [    require('postcss-plugin')()  ];  gulp.task('styles',function(){    gulp.src('path/to/dev/style.css')              .pipe(postcss(processorArray))              .pipe(gulp.dest('path/to/prod'))  });

插件

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

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

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

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

自动加前缀

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

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

npm i autoprefixer -D

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

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

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

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

这是开发的CSS:

    .item{        display:flex;        flex-flow:row wrap;    }  

这里是转换后的输出：

    .item{        display:-webkit-flex;        display:-ms-flexbox;        display:-webkit-box;        display:flex;        -webkit-flex-flow:row wrap;                -ms-flex-flow:row wrap;                        flex-flow:row wrap;    }  

利用CSSNEXT使用未来语法

CSS4不久将要来到我们身边，CSS4将带来一些新的特性，如[本地变量](http://www.w3.org/TR/css-variables/], 自定义媒体查询, 自定义选择器和新的 伪类链接。在写这篇文章时，这些新特性在所有浏览器都不支持，但是它们将在现代浏览器中实现规范得到了批准。

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

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

npm i cssnext -D

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

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

var processorsArray = [    // snipped for brevity      require('cssnext')()  ]

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

这里是开发的CSS:

// 自定义变量:root{    --linkColour:purple;    }a{    color:var(--linkColour);  }// 自定义媒体查询范围@custom-media --only-medium-screen (width>=500px) and (width/@import "partials/_base.css";/* 混入（Mixins） */@define-mixin square $dimension{    width:$dimension;      height:$dimension;  }/* 嵌套，变量和混入 */.button{    @mixin square 200px;      background:$green;      &:hover{        background:$blue;    }  }

这里是转化后的输出：

.square{    background:#0000ff;      border-radius:10px;  }.button{    width:200px;      height:200px;      background:#00ff00;  }.button:hover{    background:#0000ff;  }

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

SASS语法

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

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

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

npm i precss -D

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

    var processorsArray = [        // snipped for brevity          require('precss')()      ];  

这里是开发的CSS：

/* 变量 */$blue:#0000ff;$green:#00ff00;$radius:10px;.square{    background:$blue;      border-radius:$radius;  }/* 引用 */@import "partials/_base.css";/* 混入（Mixins） */@define-mixin square $dimension{    width:$dimension;      height:$dimension;  }/* 嵌套，变量和混入 */.button{    @mixin square 200px;      background:$green;      &:hover{        background:$blue;    }  }

这里是转化后的输出：

.square{    background:#0000ff;      border-radius:10px;  }.button{    width:200px;      height:200px;      background:#00ff00;  }.button:hover{    background:#0000ff;  }

利用社区插件扩展CSS

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

QUANTITY QUERIES

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

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

npm i postcss-quantity-queries -D

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

var processors = [    // Snipped for brevity      require('postcss-quantity-queries')()  ];

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

这里是开发的CSS:

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

这里是转化后的输出：

.container > .item:nth-last-child(n+5),.container > .item:nth-last-child(n+5) ~ .item{    background:blue;  }.item > a:nth-last-child(-n+10):first-child,.item > a:nth-last-child(-n+10):first-child ~ a{    color:green;  }.gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child,.gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child ~ img{    width:25%;  }.profiles:nth-last-child(4):first-child,.profiles:nth-last-child(4):first-child ~.profiles{    flex:1 0 50%;  }

利用SHORT扩展简写属性

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

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

使用命令行安装Short:

    npm i postcss-short -D  

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

    var processors = [        require('postcss-short')()    ];  

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：

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

这里是转化后输出的CSS：

    p{        color:dimgrey;        font-weight:300;        text-align:center;        text-transform:uppercase;        font-size:25px;        font-size:1.6rem;        line-height:1.7;        letter-spaceing:.05em;    }  

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

这里是开发的CSS：

    section{        position: absolute 10px * *;    }      .topNav{        position: fixed 0 * * 0;    }      .modal{        position: fixed 40% 25%;    }  

这里是转化后输出的CSS：

section{    position:absolute;      top:10px;  }.topNav{    position: fixed;      top:0;      left:0;  }.modal{    position:fixed;      top:40%;      right:25%;      bottom:40%;      left:25%;  }

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

今天使用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 の世界を探索し、PostCSS で利用可能なすべてのプラグインを探索することをお勧めします。これはコミュニティ プロジェクトであるため、エコシステムは人々がそれを使用し、新しいプラグインを作成する場合にのみ成長します。さらにプラグインを探索するには、NPM の利用可能なパッケージにアクセスするか、PostCSS プレイグラウンドでプラグインの機能をテストしてください。