キーポイント

• POSTCSSを使用すると、開発者は獨自のCSS前処理裝置を構(gòu)築でき、SASS、Less、Stylusなどの他の前処理者をより柔軟に制御できます。 JavaScriptプラグインを使用してスタイルを操作し、変數(shù)、ミキシン、ネストなどのプリプロセッサのような機能を追加できます。
• PostCSSの利點には、モジュール性、軽量ビルド、新機能の即時実裝、および開発戦略を?qū)g施する能力が含まれます。また、従來の前処理者よりも速いです。ただし、ビルドプロセスの複雑さの増加、異なる構(gòu)文、効果的なCSSの要件など、いくつかの欠點もあります。
• postCSSには大きな可能性がありますが、すべてのプロジェクトには適していない場合があります。小規(guī)模でシンプルなプロジェクトや単一のチームにとって魅力的なオプションになる可能性があります。しかし、大規(guī)模なチームやプロジェクトの場合、SASの幅広い理解と使用のため、既存の前処理者が依然として最初の選択肢である可能性があります。

多くの開発者は、現(xiàn)在スタイラスまたは最も人気のあるSASSを採用していません。理想的には、Mixinやコンパスなどのフレームワークを使用せずに、必要に応じてベンダープレフィックスを追加するために、Autoprefixerを使用してCSSをポストプロセスする必要があります。 Autoprefixerは、PostCSSのプラグインです。変數(shù)、ミキシン、ネストなどのプリプロセッサのような機能を?qū)g裝する他の多くの利用可能なプラグインがあります。 Ben Frainの最近の記事「Sassとの分裂：あなたではなく、It's Me」は興味深い提案を提出します。 PostCSSを使用して、必要なCSSプリプロセッサを作成できることを考えると、SASSが本當に必要ですか、それともスタイラスが必要ですか？ビルドプロセス中に基本的なSASSのようなパーサーを作成できます。この例では、gulp.jsタスクファイルを使用しますが、同じ概念がグラントまたは他のビルドシステムに適用されます。まず、NPMを使用してPostCSSと必要なプラグインをインストールします。

npm install gulp-postcss postcss-mixins postcss-simple-vars postcss-nested autoprefixer-core --save-dev

次に、gulpfile.jsでCSS処理機能の配列を作成します。

およびCSS処理タスクを作成します。たとえば、

var
    gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

PostCSS APIを使用して、獨自の処理機能を作成することもできます。たとえば、すべてのフォントファミリー宣言にsans-serifフォールバックを適用できます。

// 編譯CSS
gulp.task('css', function() {
  return gulp.src('source/css/styles.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('dest/styles/'));
});

file /source/css/styles.cssに次のコードが含まれている場合：

processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        function(css) {
            // sans-serif 后備
            css.eachDecl('font-family', function(decl) {
                decl.value = decl.value + ', sans-serif';
            });
        },
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

gulp cssを?qū)g行すると、このcssは/dest/css/styles.cssで作成されます：

$colorfore: #333;
$colorback: #fff;

@define-mixin reset {
    padding: 0;
    margin: 0;
}

main {
    font-family: Arial;
    @mixin reset;
    color: $colorfore;
    background-color: $colorback;

    article {
        color: $colorback;
        background-color: $colorfore;
    }
}

利點

main {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
    color: #333;
    background-color: #fff;
}

main article {
    color: #fff;
    background-color: #333;
}

POSTCSSを使用すると、プリプロセッサの著者によって課される制限と選択を取り除くことができます。この方法は、いくつかの利點を提供します：

• Modularプロジェクトに必要なプラグインと機能を追加するだけです。
• 軽量プレ前セッサーはますます大きくなり、複雑になっています。すべての機能を望んでいないか、使用することはできませんが、それらはまだ存在します。 PostCSSはボリュームを減らします。
• インスタント実裝 SASS、Libsass、Less、Stylus、またはその他のプレセッサーで特定の機能が利用可能になるのを待ったことがありますか？今すぐ使用できます...
• javaScript関數(shù)CSSプリプロセッサは、実際のプログラミング言語であるJavaScriptを使用します（一部はそう言いますが?。￥郅趣螭嗓违抓辚抓恁互氓笛哉Z構(gòu)造は基本です。多くの場合、作成した元のCSSよりも、より複雑で理解が困難な機能とミックスインが見られます。 PostCSSを使用すると、ファイルを簡単に開き、データベースから読み取り、HTTPリクエストを発行する、または複雑な計算を?qū)g行できます。
• 開発戦略を施行 @extendステートメントの使用を避けることをチームにしたいとします。ビルドプロセスに拡張プラグインを追加しない限り、 @Extendは誰にも利用できません。これはすぐに明らかになります。
• それは高速です - 非常に速い著者は、PostCSSが同等の前処理者よりも4?40倍高速であると推定しています。いくつかのプラグインだけが必要な場合、利點は高くなると思います。ソリューション全體がJavaScriptに組み込まれており、別のライブラリまたは言語インタープリターにジャンプする必要はありません。

短所

それで、すべて大丈夫ですか？殘念ながら、PostCSSは完璧な解決策ではありません：

• 複雑さの増加ビルドプロセスの管理がより困難になります。 SASSの追加は通常、1つまたは2つのコードですが、PostCSSにはより多くの計畫が必要です。特に、プラグインを特定の順序で呼び出す必要があるためです。たとえば、@Importインラインは、変數(shù)を解析する前に解析する必要があります。しかし、@Import宣言に変數(shù)が含まれている場合はどうなりますか？場合によっては、プラグインを複數(shù)回呼び出す必要がある場合があります。
• さまざまな構(gòu)文最初に小さなSASSプロジェクトをPostCSSに変換しようとしました。 試してはいけません！ 私は成功しましたが、PostCSSプラグインは @Mixinの代わりに @Define-Mixinのようなわずかに異なる構(gòu)文を使用することがよくあります。これにより、難読化と多くのコード更新につながる可能性があります。理由の一部は...
です
• postcssには有効なCSS ほとんどのプリプロセッサーがプレーンテキストファイルを解析する必要があるため、構(gòu)文は理論的に可能です。 PostCSSはオブジェクトモデルを作成するため、最初から構(gòu)文的にCSSを修正する必要があります。 //単一行のコメントでさえ、それを失敗させる可能性があります。 CSSファイルをPostCSSに渡す前に事前に処理することができますが、プリプロセッサを使用することに戻ります。

プリプロセッサをあきらめる必要がありますか？

単一のチームで小さく比較的シンプルなスタンドアロンプ??ロジェクトを開始すると、カスタムPostCSSプロセッサが魅力的なオプションになる可能性があります。また、ベンダープレフィックス、パッケージングメディアクエリなどのREALポストプロセスのタスクにPOSCSSをお勧めします。これらのタスクを自分で行うことに利點はありません。しかし、SASSは臨界質(zhì)量に達しました。完璧なプレプロセッサの構(gòu)文はありませんが、チームのほとんどの開発者が理解します。微妙な違いは、大きな利益を提供したり、すべての人にアピールすることはまずありません。つまり、PostCSSと同様のリワークフレームワークには大きな可能性があります。モジュラーCSSプラグインシステムが、またはミックスさえできる場合、SASSの構(gòu)文と機能性、より少ないスタイラスとスタイラスの機能性を再現(xiàn)できる場合、他のすべてのプレペルセッサーの道具を倒すことができる前処理器があります。あなたは誰かが今このプロジェクトを開発していることを賭けることができます...

プロジェクトのPreprocessorとしてPostCSを使用しましたか？それはあなたをSASSから引き離しますか？あなたはより少ないところから移動しますか？スタイラスをあきらめますか？

PostCSS

に関する

FAQ

PostCSSと他のCSSプレセッサの主な違いは何ですか？

PostCSSは、JavaScriptプラグインを使用してスタイルを変換するツールです。これらのプラグインは、コードソート、ベンダーのプレフィックスの追加、さらには將來のCSS機能を有効にするなど、さまざまなタスクを?qū)g行できます。 SASS以外のような他のCSSプレセッサとは異なり、PostCSSには構(gòu)文が組み込まれていません。代わりに、プラグインを使用してCSSを変換します。これにより、プロジェクトに必要なプラグインのみを選択できるため、より柔軟でカスタマイズ可能になります。

postCSSのインストールと使用方法は？

postcssをインストールするには、コンピューターにnode.jsとnpmをインストールする必要があります。次に、コマンド

を使用して、グローバルにPostCSSをインストールできます。 PostCSSを使用するには、使用するプラグインをインストールし、使用するプラグインを指定する構(gòu)成ファイルを作成する必要があります。次に、コマンドnpm install -g postcss-cliを使用して、CSSファイルでPostCSSを?qū)g行できます。 postcss input.css -o output.css

人気のあるPostCSSプラグインは何ですか？

多くのPostCSSプラグインが利用可能で、それぞれが異なる目的を持っています。一部の一般的なプラグインには、CSSSにベンダーのプレフィックスを自動的に追加するAutoprefixerが含まれています。これにより、將來のCSS機能を使用できます。

他のCSSプレ前セッサーと一緒にPostCSを使用できますか？

はい、SASS以下のような他のCSSプレセッサと一緒にPostCSを使用できます。これにより、これらの前処理者の機能を活用しながら、PostCSSの柔軟性とパワーの恩恵を受けます。

postCSSを使用することの利點は何ですか？

PostCSSは多くの利點を提供します。非常にカスタマイズ可能で、必要なプラグインのみを選択できます。これにより、より小さく、より高速なビルドプロセスにつながる可能性があります。また、PostCSSを使用すると、今日の將來のCSS機能を使用することもでき、CSSにベンダープレフィックスを自動的に追加し、時間を節(jié)約し、さまざまなブラウザーでスタイルを適切に機能させることができます。

postCSSを使用することの欠點は何ですか？

PostCSSは強力で柔軟ですが、その學(xué)習(xí)曲線は他のCSS前処理者よりも急な場合があります。プラグインに依存しているため、プロジェクトに適したプラグインの調(diào)査と選択に時間を費やす必要があります。また、それは新しいツールであるため、他の前処理者ほど広くサポートされたり採用されたりしない場合があります。

postCSSはどのようにミックスインを処理しますか？

PostCSSは、PostCSS-Mixinsプラグインを介してMixinを処理します。このプラグインを使用すると、SASS以下で行うことと同様に、CSSでミキシンを定義および使用できます。 PostCSS構(gòu)成ファイルにミックスインを定義し、@mixinキーワードを使用してCSSで使用できます。

既存のプロジェクトでPostCSSを使用できますか？

はい、既存のプロジェクトにPostCSを統(tǒng)合できます。使用するPostCSSとプラグインをインストールしてから、PostCSS構(gòu)成ファイルを設(shè)定するだけです。その後、既存のCSSファイルでPostCSSを?qū)g行できます。

PostCSSは、AutoprefixerやCSSNextなどの他のツールとどのように比較されますか？

AutoprefixerとCSSNextは、実際にはPostCSSプラグインです。これは、それらがPostCSSの上で実行されるツールであり、そのプラグインアーキテクチャを活用することを意味します。 AutoprefixerはCSSにベンダーのプレフィックスを追加しますが、CSSNEXTを使用すると、將來のCSS機能を今日使用できます。

PostCSSは大規(guī)模なプロジェクトに適していますか？

はい、PostCSSはあらゆるサイズのプロジェクトに適しています。カスタマイズ可能であるため、必要なプラグインのみを選択して、より小さく、より高速なビルドプロセスを可能にします。これにより、パフォーマンスが問題である大規(guī)模なプロジェクトに適しています。

以上がPostCSSを使用して獨自のCSSプリプロセッサを構(gòu)築する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。