CSSプリコンパイラ後、PostCSS_html/css_WEB-ITnose

CSS プリプロセッサというと、Sass、Less、Stylus を思い浮かべるかもしれません。この記事で紹介する PostCSS はまさにそのようなツールです。CSS プリコンパイラーでできることも実行できます。

「あなたの言ったことはすべて理解できました。それで、なぜそれを使うのですか?」

スイートとシングルトン

Sass などのプリコンパイラーがテンプレート言語を新規に定義してから CSS に変換する場合、PostCSS は CSS 自体をより純粋に変換します。

CSS プリコンパイラーの使い方をどのように学んだかを思い出してください。CSS に変換できる言語があり、変数、ネスト、継承などの多くの機能があり、それぞれの機能が特定の構文を渡していることを学びました。成し遂げる。パッケージ化された工具箱（量産型？）を渡すようなもので、中には便利なものが入っています。

PostCSS についてはどうですか? PostCSS は、箱を手渡すようなものですが、その隣の飾り棚から必要なツールを取り出し、箱に入れて持ち帰ることができます。ショーケースにあるものでは十分ではないと感じる場合は、PostCSS を使用して独自のツールを構築できます。したがって、PostCSS を使用すると、必要なものだけを取得できます。

これは PostCSS の modular (モジュラー) スタイルです。 CSS 変換ツールとしては非常に小さいですが、変換機能はすべてプラグインなのでカスタマイズ可能です。

PostCSS の簡単な原理

PostCSS 自体には、CSS アナライザー、CSS ノード ツリー API、ソース マップ ジェネレーター、および CSS ノード ツリー スプライサーのみが含まれています。

CSS の構成単位はスタイル ルール (ルール) であり、各スタイル ルールには 1 つ以上の属性と値の定義が含まれます。したがって、PostCSS の実行プロセスは次のようになります。まず、CSS アナライザーが CSS 文字コンテンツを読み取り、完全なノード ツリーを取得します。次に、ノード ツリー (ノード ツリー API に基づくプラグイン) に対して一連の変換操作が実行されます。最後に、css ノード ツリー スプライサーは、変換されたノード ツリーを CSS 文字に再構築します。この期間中に、変換前後の文字の対応を示すソース マップを生成できます。

さらに興味深いのは、PostCSS プラグインは実際には JavaScript 関数であり、PostCSS ノード ツリー API を使用してさまざまな変換を実行します。 CSS ノード ツリー。

プラグインのプレビュー

すべてのプラグインは、PostCSS ホームページで見つけることができます。ここでは、説明のためにごく一部のみを選択します。

Autoprefixer

PostCSS の最も有名なプラグインは Autoprefixer です。名前が示すように、ブラウザーのプライベート プレフィックスを自動的に追加できます。その付加価値は、使用可能かどうか、設定したブラウザのサポート範囲を参照するため、非常に信頼できます。以下に例を示します (私が設定したブラウザのサポート範囲に基づいています):

.container{    display: flex;}

Compiled:

.container{    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;}

postcss-nested&postcss-mixins

初めて PostCSS を使い始めたとき、Sass Most にあるものを PostCSS を使って実装しようと考えました。よく使用される機能。そこで、postcss-nested と postcss-mixins を見つけました。それらを結合した後、次のようなことができます:

@define-mixin clearfix{    &:after{        display: table;        clear: both;        content: " ";    }}.column-container{    color: #333;    @mixin clearfix;}

コンパイル後:

.column-container{    color: #333;}.column-container:after{    display: table;    clear: both;    content: " ";}

この時点で、「プリコンパイラでできることはプリコンパイラでもできる」という感覚はすでに得られていますか?

PostCSS の使い方

個人的には Gulp と併用することをお勧めします。この記事では gulp-postcss の使い方のみを紹介します。

gulp-postcss とプラグインは両方とも npm です。まず、npm install を使用してプロジェクト ディレクトリ (node_modules にあります) にインストールします。次に glupfile.js を編集して PostCSS を Gulp のタスクとして登録します。以下は、Autoprefixer、postcss-simple-vars、postcss-mixins、および postcss-nested の 4 つのプラグインを使用してソース マップ ファイルを生成する例です。

var gulp = require("gulp");var postcss = require("gulp-postcss");var autoprefixer = require('autoprefixer-core');var postcssSimpleVars = require("postcss-simple-vars");var postcssMixins = require("postcss-mixins");var postcssNested = require("postcss-nested");var sourcemaps = require("gulp-sourcemaps");// Css process.gulp.task("postcss", function(){    var processors = [        postcssMixins,        postcssSimpleVars,        postcssNested,        autoprefixer({            browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]        })];    return gulp.src(["./stylesheets/src/*.css"])        .pipe(sourcemaps.init())        .pipe(postcss(processors))        .pipe(sourcemaps.write("."))        .pipe(gulp.dest("./stylesheets/dest"));});

上記のコードでは、processors は、 PostCSS プラグインに追加します。 PostCSSはプラグインを定義した順に次々と実行していきますので、複数のプラグインを組み合わせて使用​​する場合は配置に注意してください。

カスタム変換

さらに、独自の変換を簡単に作成できます (PostCSS プラグインはすべて JavaScript 関数であることを思い出してください)。たとえば、以下は CSS コード内のレム単位の値を px 値に変更するカスタム変換メソッドです。

var custom = function(css, opts){    css.eachDecl(function(decl){        decl.value = decl.value.replace(/\d+rem/, function(str){            return 16 * parseFloat(str) + "px";        });    });};

そして、このメソッドをプロセッサーに直接追加すると (postcssMixins と同じように)、使用できるようになります。元の値が 3rem の場合、48px になります。

上記は単なる変換です。正式にプラグインを作成したい場合は、PostCSS プラグイン ガイドを参照してください。

パフォーマンス

PostCSS は、JavaScript で書かれた PostCSS は C++ で書かれた libsass より 3 倍高速であると主張しています (Sass は元々 Ruby で書かれましたが、後に C++ エンジン libsass が登場し、より高速になりました)。ここでは具体的な数値をあまり気にする必要はないと思いますが、「PostCSS は非常に高速に動作する」と感じるだけで十分です。

実際の操作は大まかに次のとおりです:

もっとやろう

PostCSS に基づいて、既存の CSS プリコンパイラーでは実行できない多くのことを実行できます。たとえば、プラグイン シリーズ cssnext を使用すると、CSS4+ 構文 (変数やその他の多くの機能の追加) を使用でき、現在利用可能な CSS3 への変換に役立ちます。

ちょっとした問題

PostCSS に関する 1 つの問題は、PostCSS が断片化されているため、PostCSS を使用するために用意された CSS コードを正しく解析して強調表示できるエディターが見つからなかったことです。たとえば、WebStorm では、これを通常の CSS ファイルとして扱うため、大量の赤いエラー メッセージが表示されます。

では、CSS プリコンパイラーは時代遅れなのでしょうか?

もちろん違います。他の一般的なフレームワークやツールと同様に、CSS プリコンパイラーは、ニーズに応じて選択できる実績のあるツールです。

Sass などの Css プリコンパイラーは成熟しており、信頼性が高くなります。一方で、これらはすでに人気のあるテンプレート言語であり、完全なドキュメントと周辺サポートがあり、比較的安定しており、チームに新しく参加する人でも簡単に理解できます。一方、一体型には、模型を組み立てるのが面倒でもプロに頼んで組み立ててもらえるなどの便利な面もあります。

PostCSS はモジュール性が特徴です。長期的には、PostCSS はより多くの種類の CSS 変換を行うことができます。カスタマイズ可能なスタイルは、個性を追求する人に非常に適しています（その方が速いし、面白いプラグインを自分で作ることができます）。

さらに、cssプリコンパイラーとPostCSSを併用することもできます。一般的な使用法は、Sass をコンパイルして PostCSS の Autoprefixer に接続することです (結局のところ、これは PostCSS の署名プラグインです)。

結論

PostCSS のスタイルは、CSS の開発方法を変えるエコシステムを構築していると言えます。ですから、今後のことに関しては、とても楽しみにしています。

(ブログを再編集、元のアドレス: http://acgtofe.com/posts/2015/05/modular-transforming-with-postcss/)