技術

PostCSS：Sassの新しいプレイ日

最近、 PostCSS ラウンドを行うツールです Web開発のフロントエンド側。

PostCSSは、の作成者であるAndreySitnikによって開発されました。自動プレフィックス。これは、JavaScriptを使用してすべてのCSSを変換するツールとして開発されたNode.jsパッケージであり、他のプロセッサーよりもはるかに高速なビルド時間を実現します。

その名前が示すように見えますが、それはポストプロセッサではなく（プリプロセッサでもありません）、PostCSS固有（またはより正確にはPostCSSプラグイン固有）の構文を変換するトランスパイラーですバニラCSS。

そうは言っても、これはないつまり、PostCSSと他のCSSプロセッサは連携できません。実際のところ、CSSの前処理/後処理の世界全体に慣れていない場合は、PostCSSをSassと一緒に使用すると、多くの頭痛の種を減らすことができます。これについては、後ほど説明します。

ccorpとscorpの違いは何ですか

PostCSSは他のCSSプロセッサに代わるものではありません。むしろ、必要なときに役立つ可能性のある別のツール、ツールセットへの別の追加としてそれを見てください。

PostCSSの概要図。

PostCSSの使用は最近指数関数的に増加し始めており、今日ではTwitter、JetBrains、Wikipediaなどの最大のテクノロジー業界の企業で使用されています。その広範な採用と成功は、主にそのモジュール性によるものです。

プラグイン、プラグイン、プラグイン

PostCSSはすべてプラグインに関するものです。

これにより、使用するプラグインを選択し、不要な依存関係を排除し、他のプリプロセッサの基本的な特性を使用して、すばやく軽量なセットアップを行うことができます。また、効率を維持しながら、ワークフロー用にさらに高度にカスタマイズされた構造を作成できます。

この投稿の執筆時点で、PostCSSには200を超えるプラグインのリポジトリがあり、それぞれがさまざまなタスクを担当しています。に PostCSSのGitHubリポジトリ、プラグインは、「グローバルCSSの問題を解決する」、「将来のCSSを今日使用する」、「CSSの読みやすさを向上させる」、「画像とフォント」、「リンター」、「その他」に分類されます。

ただし、プラグインディレクトリより正確な分類が見つかります。それらのいくつかの機能についてより良いアイデアを得るために、自分でそこを見てみることをお勧めします。それらは非常に広く、かなり印象的です。

最も人気のあるPostCSSプラグインについて聞いたことがあると思いますが、自動プレフィックス、人気のあるスタンドアロンライブラリです。 2番目に人気のあるプラグインは CSSNext 、たとえば、ブラウザのサポートを気にすることなく、CSSの新しいカスタムプロパティなど、最新のCSS構文を使用できるようにするプラグイン。

ただし、すべてのPostCSSプラグインがそれほど画期的なわけではありません。いくつかは、おそらく他のプロセッサで箱から出てくる機能を単に提供します。 parent selectorを取る例えば。 Sassを使用すると、Sassをインストールするとすぐに使用を開始できます。 PostCSSでは、postcss-nested-ancestorsを使用する必要がありますプラグイン。同じことがextendsにも当てはまりますまたはmixins。

では、PostCSSとそのプラグインを使用する利点は何ですか？答えは簡単です-あなたはあなた自身の戦いを選ぶことができます。これから使用するSassの部分がparent selectorだけだと感じた場合は、環境にSassライブラリのインストールなどを実装してCSSをコンパイルするストレスを軽減し、 PostCSSとpostcss-nested-ancestorsのみを使用して処理しますプラグイン。

それはただです 1 PostCSSのユースケースの例ですが、自分でチェックし始めると、間違いなく他の多くのユースケースに気付くでしょう。

基本的なPostCSSの使用法

まず、PostCSSの基本について説明し、通常の使用方法を見てみましょう。 PostCSSは、GulpやGruntなどのタスクランナーで使用すると非常に強力ですが、コマンドラインから直接使用することもできます。 postcss-cli 。

簡単なユースケースの例を考えてみましょう。を使用したいとします postcss-color-rgba-フォールバック RGBA形式のすべての色にフォールバックHEX値を追加するためのプラグイン。

支払い意思額は、需要の弾力性を測定する方法です。

NPMをインストールしたら、postcss、postcss-cliおよびpostcss-color-rgba-fallbackの場合、次のコマンドを実行する必要があります。

postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

この命令では、PostCSSにpostcss-color-rgba-fallbackを使用するように指示しています。プラグイン、src/css/all.css内にあるCSSを処理し、dist/css/all.cssに出力します。

OK、それは簡単でした。それでは、もっと複雑な例を見てみましょう。

タスクランナーとSassとともにPostCSSを使用する

PostCSSは、ワークフローにかなり簡単に組み込むことができます。すでに述べたように、Grunt、Gulp、Webpackなどのタスクランナーと完全に統合されており、NPMスクリプトでも使用できます。 PostCSSをSassおよびGulpと一緒に使用する例は、次のコードスニペットと同じくらい簡単です。

var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

上記のコード例を分解してみましょう。

必要なすべてのモジュール（Gulp、Contact CSS、Sass、PostCSS、およびCSSNext）への参照を一連の変数に格納します。

次に、stylesheetsという新しいGulpタスクを登録します。このタスクは、./src/css/にあるファイルを監視します拡張子.scss （サブディレクトリ構造の深さに関係なく）、Sassはそれらをコンパイルし、それらすべてを単一のall.cssに連結します。ファイル。

一度all.cssファイルが生成され、PostCSSに渡されてPostCSS（およびプラグイン）関連のすべてのコードが実際のCSSにトランスパイルされ、結果のファイルが./dist/cssに配置されます。

さて、タスクランナーとプリプロセッサを使用してPostCSSを設定するのは素晴らしいことですが、そもそもPostCSSを使用することを正当化するにはそれで十分ですか？

ブラウザプラグインなしでWebユーザーが表示できるアニメーションテクノロジーはどれですか？

このように言いましょう。Sassは安定していて成熟していて、背後に巨大なコミュニティがありますが、たとえばAutoprefixerなどのプラグインにはPostCSSを使用したい場合があります。はい、スタンドアロンのAutoprefixerライブラリを使用できますが、AutoprefixerをPostCSSプラグインとして使用する利点は、後でワークフローにプラグインを追加して、JavaScriptライブラリの大量の依存関係を回避できることです。

このアプローチでは、プレフィックスなしのプロパティを使用して、APIからフェッチされた値に基づいてプレフィックスを付けることもできます。使ってもいいですか、Sassだけではほとんど達成できないこと。これは、複雑な作業を避けようとしている場合に非常に便利です ミックスイン それコードにプレフィックスを付けるのに最適な方法ではない可能性があります。

アマゾンaws認定ソリューションアーキテクト

すでにSassを使用している場合、PostCSSを現在のワークフローに統合する最も一般的な方法は、.sassのコンパイル済み出力を渡すことです。または.scss PostCSSとそのプラグインを介してファイルします。これにより、SassとPostCSSの両方の出力を持つ別のCSSファイルが生成されます。

タスクランナーを使用している場合、PostCSSの使用は、.sassをコンパイルした直後に、現在のタスクのパイプラインに追加するのと同じくらい簡単です。または.scssファイル（または選択したプリプロセッサのファイル）。

PostCSSは他のユーザーとうまく連携し、開発者が毎日経験するいくつかの大きな問題点を緩和することができます。

PostCSS（およびCSSNextやAutoprefixerなどのいくつかのプラグイン）とSassが連携する別の例を見てみましょう。次のコードを使用できます。

:root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

このコードスニペットには、バニラCSSとSass構文が含まれています。カスタムプロパティ、この記事の執筆時点では、まだ候補推奨（CR）ステータスにあり、PostCSS用のCSSNextプラグインが機能する場所です。

このプラグインは、カスタムプロパティなどを今日のCSSに変換する役割を果たします。 transformにも同様のことが起こりますプロパティ。これは、Autoprefixerプラグインによって自動プレフィックスされます。以前に記述されたコードは、次のようになります。

body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

PostCSS用のプラグインのオーサリング

前述のように、PostCSSの魅力的な機能は、それが可能にするカスタマイズのレベルです。そのオープン性のおかげで、特定のニーズに対応するためにPostCSS用に独自のカスタムプラグインを作成することは、JavaScriptの記述に慣れている場合はかなり簡単な作業です。

PostCSSのスタッフは、開始するのにかなり堅実なリストを持っています。プラグインの開発に興味がある場合は、おすすめの記事とガイド。何か質問したり、話し合ったりする必要があると感じた場合は、グリッド始めるのに最適な場所です。

PostCSSにはそのAPI フォロワーのかなり活発な基盤を持つツイッター。この投稿で前述した他のコミュニティ特典とともに、これがプラグイン作成プロセスを非常に楽しくし、そのような共同作業を行う理由です。

したがって、PostCSSプラグインを作成するには、Node.jsモジュールを作成する必要があります。（通常、node_modules/ディレクトリ内のPostCSSプラグインフォルダの前には、「postcss-」のようなプレフィックスが付いています。これは、PostCSSに依存するモジュールであることを明示するためです。）

手始めに、index.jsで新しいプラグインモジュールのファイルには、プラグインの処理コードのラッパーとなる次のコードを含める必要があります。

var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

プラグインに名前を付けました replacecolors 。プラグインはキーワードを探しますdeepBlackTextそしてそれを#2e2e2eに置き換えますHEXカラー値：

組織のゲシュタルト原則を彼らのイラストと一致させます。

var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = ‘color: #2e2e2e;’; } }); }); } });

前のスニペットは次のことを行いました。

使用 walkRules()現在の.cssにあるすべてのCSSルールを繰り返し処理しました処理中のファイル。
walkDecls()を使用する現在の.css内にあるすべてのCSS宣言を繰り返し処理しましたファイル。
次に、宣言を宣言変数内に格納し、文字列deepBlackTextかどうかを確認しました。その中にありました。もしそうなら、それは次のCSS宣言の宣言全体を置き換えました：color: #2e2e2e;。

プラグインの準備ができたら、コマンドラインから直接次のように使用できます。

postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

または、たとえば、 Guplfile このような：

var replacecolors = require('postcss-replacecolors');

PostCSSを使用するには、現在のCSSプロセッサを捨てる必要がありますか？

まあ、それはあなたが探しているものに依存します。

SassとPostCSSの両方が同時に使用されるのはよくあることです。これは、PostCSSプラグインの機能とともに、プリプロセッサ/ポストプロセッサがすぐに提供するツールの一部を初心者が簡単に操作できるためです。それらを並べて使用すると、現在のプロセッサに依存する実装を維持する方法を提供しながら、比較的新しい、おそらく未知のツールで事前定義されたワークフローを再構築することを回避することもできます（ サスミックスイン 、 拡張します 、 親セレクター 、 プレースホルダーセレクター 、等々）。

関連： 制御の維持：WebpackとReactのガイド、Pt。 2