PostCSSの紹介

postcss：プレ前セッサーを超えた強力なCSSツール

キーハイライト：

node.jsベースのツールである

PostCSSは、プラグインを使用して有効なCSSを強化します。 CSSを抽象的構文ツリー（AST）に解析し、最終出力を生成する前に操作を可能にします。 Sass、Less、Stylusなどの前処理を補完することができます

PostCSSは、標準のCSS解析、カスタマイズ可能なプラグイン統合、プロジェクト固有の構成、カスタムプラグインを作成する機能などの利点を提供します。 多くの開発者は、Autoprefixerなどのプラグインを介して既にPostCSSを間接的に利用しています。
• node.jsを要求すると、PostCSSは、Webpack、Parcel、Gulp.jsなどのビルドツールとシームレスに統合します。 機能には少なくとも1つのプラグインが必要であることに注意してください。
POSTCSSは、
• オプションを使用して、ソースファイルの変更で自動再構築をサポートしています。 JavaScript構成ファイルにより、包括的なオプション管理と環境固有の設定（開発対制作）が可能になります。
• 前処理担当者：長所と短所
• --watch SASS、LESS、STYLUSなどの
前処理装置は、ネスト、変数、ミキシンなどの機能を導入し、CSS管理を改善しました。これらの機能のいくつかはネイティブCSSになりつつありますが、プリプロセッサは大規模なプロジェクトとコーディングの一貫性を維持するために依然として価値があります。 ただし、前処理者には制限があります：

限られた拡張性：

プリプロセッサーは固定機能セットを提供し、組み込みの機能を超えて機能を拡張することを困難にします。 カスタム関数が可能かもしれませんが、複雑なタスク（SVGをインライン化するなど）は範囲外に残ります。 コーディングスタイルの実施も困難です

非標準的な構文：

プリプロセッサーは、ブラウザの解釈の前にコンピレーションを必要とする独自の構文を導入します。これにより、依存関係の問題が発生し、プリプロセッサが変更されるか利用できなくなった場合、コードの更新が必要です。

PostCSSには、説得力のある代替手段があります。
• postcssを理解する
• postcssはプリプロセッサではありません。 CSSトランスです。有効なCSSを処理し、プラグインを介して強化します。 SASS/より少ないユーザーでさえ、最初のコンピレーション後にPostCSを組み込むことがよくあります。一般的なPostCSSプラグインであるAutoprefixerは、ベンダーのプレフィックスを自動的に追加します postcss自体は受動的です。 CSSをASTに解析します。プラグインはこのASTを処理し、プロパティを変更します。 PostCSSは、修正されたASTからCSSを再生します約350のプラグインを使用でき、

  処理、@import単純化、画像資産処理、糸くず、および模倣などのタスクをカバーするPostCSSは、幅広い柔軟性を提供します。 ユーザーフレンドリーなプラグイン検索には、PostCSSプラグインカタログからアクセスできます。 calc()PostCSSの利点には以下が含まれます

  標準のCSS：
  postCSSは標準のCSSで動作し、後方互換性を提供します。新しいプロパティを古い同等物に透過させることができ、ブラウザサポートが改善するにつれて、このプロセスの必要性を排除できます。プラグインはプリプロセッサのような構文を処理できますが、必須ではありません
  • カスタマイズ可能な機能：必要なプラグインと機能のみを使用します。 これにより、CSS処理パイプラインを細かく制御できます。
  • プロジェクト固有の構成：各プロジェクトのプラグインを個別に構成し、特定の要件に適応します。
  カスタムプラグインの開発：
  • JavaScriptにカスタムプラグインを作成して、PostCSSの機能を拡張します。 潜在的なプリプロセッサの交換：
  既にオートプロフィキサーなどのプラグインを使用している場合、PostCSSはトリプロセッサを置き換え、ワークフローを単一のステップに合理化する可能性があります。
  • postcssのインストールと使用 postcssにはnode.jsが必要ですこのガイドは、コマンドラインのインストールと使用法を示していますが、ビルドツールとの統合も可能です。
  • グローバルインストール：

  インストールの確認：

  1. プラグインのインストール（postcss-import）：

     npm install -g postcss-cli

  2. サンプルプロジェクト（）を作成し、、

     postcss --help

     、
  ファイル（元のテキストで説明されているように）を含む
  3. フォルダーを使用します。 次に、postcssを実行します：

     npm install -g postcss-import

  ソースマップ、オートプレフィキサー、および模倣

  cssprojectPostCSSは、デフォルトでインラインソースマップを生成します。 外部マップを使用してsrcを使用し、それらを無効にするために（生産に推奨）。 main.cssAutoprefixerはベンダープレフィックスを追加します：_reset.css _elements.css

  postcss ./src/main.css --use postcss-import --output ./styles.css

  CSSNANOはCSSを最小限に抑えます：

  コマンドに含めると、生産に--mapを使用してください。--no-map

  自動化されたビルドと構成ファイル

  npm install -g autoprefixer

  postcssおよびpostcss-importオプションは、ファイルの変更で自動再構築を有効にします。

  a

  ファイルが合理化された構成：

  npm install -g cssnano

  postcss開発モードに--no-mapを使用して、生産に省略します。

  結論

  PostCSSは、CSS処理に対する柔軟で強力なアプローチを提供します。 プラグインシステムをマスターすることにより、あらゆるWebプロジェクト向けに高度にカスタマイズされた効率的なワークフローを作成できます。 元のテキストには、さらなるリソースが提供されています。 FAQは、元のテキストの最後にも含まれています。

以上がPostCSSの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。