あなたをCSSウィザードにするための10の素晴らしいPostCSSプラグイン

PostCSSはそれを可能にする信じられないほど用途の広いツールです。 JavaScriptプラグインを使ってCSSスタイルを変換する. その柔軟性は、それが構築された方法にあります.

PostCSSの中核部分は、npmでインストールできるNode.jsモジュールです。これには、プロジェクトで使用することを選択できる200を超えるプラグインのエコシステムがあります。.

PostCSSはプリプロセッサでもポストプロセッサでもありません。異なるPostCSSプラグインがこれらのカテゴリのどちらか、または両方に分類される可能性があるためです。それはあなたがそれを作るものによって完全にあなた次第です。 PostCSSでは、あなたは 別の構文を学ぶ必要はありません SassやLESSの場合と同じです。すぐに使い始めることができます.

PostCSSは既存のCSSファイルを受け取り、それをJavaScriptで読み取り可能なデータに変換します。その後、JavaScriptプラグインが変更を実行し、PostCSSは変更されたバージョンの元のファイルを返します。かっこいいね?

この記事では、10のPostCSSプラグインを見ていきます。 あなたが達成できる素晴らしいことのいくつかへの洞察をあなたに与えなさい この素晴らしいツールを使って.

1.オートプレフィックス

自動プレフィックス Google、Twitter、Shopifyなどの著名なハイテク企業で使用されているので、おそらく最も有名なPostCssプラグインです。それ 必要に応じてCSSプレフィックスにベンダープレフィックスを追加する.

AutoprefixerはCan I Useのデータを使用します。このようにすると、日付は更新されず、常に最新の規則を適用できます。あなたはそれがそのインタラクティブなデモサイトでどのように機能するかをチェックすることができます.

2. CSSネクスト

CSSnext それはCSS transpilerです 現在のサイトで将来のCSS構文を使用できるようにします. W3Cには、現在ブラウザでは実装されていない多くの新しいCSSルールがありますが、開発者がより洗練されたCSSをより速く簡単に書くことを可能にする可能性があります。 CSSnextはこのギャップを埋めるために作られました.

その機能を見て、それを使って何ができるのかを確かめることは価値があります。 カスタムメディアクエリ、カスタムセレクタ、色修飾子、SVGフィルタ、および新しい擬似クラスを使用する あなたのデザインに.

3. PreCSS

PreCSS CSSプリプロセッサのように動作するPstCSSプラグインの一つです。それはそれを可能にします あなたのsytlesheetファイルでSassのようなマークアップを利用する.

ワークフローにPreCSSを導入することで、変数を使用できます, if-else 文, にとって ループ、ミックスイン, @extend そして @インポート CSSコードには、ルール、ネスト、その他多くの便利な機能があります。 PreCSSのGithubドキュメンテーションはあなたにそれを最大限に活用する方法に関する詳細な指示を与えます.

4. StyleLint

StyleLint 現代のCSSリンターは CSSコードの校正と検証. エラーを回避しやすくなり、一貫したコーディング規約に従うことができます。.

StyleLintは最新のCSSシンタックスを理解しているので、前述のPreCSSプラグインと一緒に使用できます。それはまたあなたがあなた自身の設定をすることを可能にし、そしてあなたの設定が有効であるかどうかさえチェックする。.

5. PostCSS資産

PostCSS Assetsプラグインは便利です CSSファイルのアセットマネージャ. PostCSS Assetsは環境の変化からあなたのスタイルシートファイルを分離するので、URLパスに問題がある傾向があるなら、それは素晴らしい選択となることができます。.

ロードパス、相対パス、およびベースパスを定義する必要があります。プラグインは必要なアセットを自動的に検索します。例えば、適切なURLが必要な場合は、次のコードを書くことができます。 foobar.jpg 画像：

 body background：resolve（ 'foobar.jpg'）;

PostCSS資産も 資産キャッシュの面倒を見る, あなたが設定できるように キャッシュバスター アセットが変更された場合にURLパスを自動的に変更する場合はtrueに設定します。このスマートプラグインは、画像ファイルのサイズ（幅と高さ）を計算したり、プリセットの比率を使ってサイズを変更したりします。.

6. CSSナノ

本番サイト用に最適化され縮小されたCSSファイルが必要な場合は、チェックする価値があります。 CSSナノ. これはモジュラープラグインで、たくさんの小さな、単一責任のPostCSSプラグインで構成されています。空白の削除などの基本的な縮小手法を実行するだけでなく、集中的な最適化を可能にする高度なオプションもあります。.

他の多くの機能の中でも、CSSNanoはz-index値をリベースし、カスタム識別子を減らし、長さ、時間と色の値を変換し、そして古いベンダープレフィックスを取り除くことができます。.

7.フォントマジシャン

あなたが洗練されたタイポグラフィのファンなら、あなたはきっと好きになるでしょう フォントマジシャン PostCSSプラグインFont Magicianの魔法は、その機能に依存しています 必要なものすべてを自動的に生成する @フォントフェイス 規則.

それがどのように機能するかは非常に簡単です、あなただけを追加する必要があります font-family： "My Favフォント"; CSSはHTML要素を規則とし、Font Magicianは残りの作業を行います。 Googleフォント、フォントのローカルコピー、ブートストラップタイポグラフィを追加することも、非同期でフォントを読み込むこともできます。これがインタラクティブデモサイトです。.

8. SVGを書く

あなたのCSSファイルにSVGを正しく書くことがどれほどクールなのか疑問に思ったことはありますか？ Write SVG PostCSSプラグインの助けを借りて、あなたは簡単にこの目標を達成することができます.

この便利なプラグインは、例えば、それを可能にします SVGの背景とアイコンをCSSファイルに保存する, 以降 関連するHTML要素にそれらを追加する 次のように

 @svg square @rect fill：var（ - 色、黒）;幅：100％。身長：100％。例：background：white svg（正方形パラメータ（ - 色＃00b1ff））;

9.失われたグリッド

失われたグリッド 印象的なものを提供する素晴らしいPostCSSプラグインです。 CSSグリッドシステム それだけではない 普通のCSSで動く だけでなく プリプロセッサ言語 （Sass、LESS、Stylus）それを使用します calc（） カスタマイズにあまり時間をかけずに簡単に使用できる美しいグリッドを作成するためのCSS機能.

Lost Gridには、かなり単純明快な規則があります。たとえば、25％幅の列を定義しても、この小さなコードスニペット以上のものは必要ありません。

 div lost-column：1/4;

10. PostCSSのスプライト

の PostCSSスプライト プラグインはそれが簡単になります 画像スプライトを生成する, すなわち、単一のファイルに配置された画像の集まり。いくつかのオプションを設定した後、プラグインはあなたのスタイルシートファイルから画像を取得し、それらをスプライトにマージし、それから必要なところで画像参照を更新します.

あなたはどの画像をスプライトに入れたいかを決定するためにあなたは異なったフィルタとグルーパーを使うことができます、そしてあなたは同様に出力画像の寸法を設定することができます.