PostCSSを使用して独自のCSSプリプロセッサを構築する方法

キーポイント

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

多くの開発者は、現在スタイラスまたは最も人気のあるSASSを採用していません。理想的には、Mixinやコンパスなどのフレームワークを使用せずに、必要に応じてベンダープレフィックスを追加するために、Autoprefixerを使用してCSSをポストプロセスする必要があります。 Autoprefixerは、PostCSSのプラグインです。変数、ミキシン、ネストなどのプリプロセッサのような機能を実装する他の多くの利用可能なプラグインがあります。 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を実行すると、この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関数CSSプリプロセッサは、実際のプログラミング言語であるJavaScriptを使用します（一部はそう言いますが！）。ほとんどのプリプロセッサ言語構造は基本です。多くの場合、作成した元のCSSよりも、より複雑で理解が困難な機能とミックスインが見られます。 PostCSSを使用すると、ファイルを簡単に開き、データベースから読み取り、HTTPリクエストを発行する、または複雑な計算を実行できます。
• 開発戦略を施行 @extendステートメントの使用を避けることをチームにしたいとします。ビルドプロセスに拡張プラグインを追加しない限り、 @Extendは誰にも利用できません。これはすぐに明らかになります。
• それは高速です - 非常に速い著者は、PostCSSが同等の前処理者よりも4〜40倍高速であると推定しています。いくつかのプラグインだけが必要な場合、利点は高くなると思います。ソリューション全体がJavaScriptに組み込まれており、別のライブラリまたは言語インタープリターにジャンプする必要はありません。

短所

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

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

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

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

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

PostCSS

に関する

FAQ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

はい、既存のプロジェクトにPostCSを統合できます。使用するPostCSSとプラグインをインストールしてから、PostCSS構成ファイルを設定するだけです。その後、既存のCSSファイルでPostCSSを実行できます。

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

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

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

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

以上がPostCSSを使用して独自のCSSプリプロセッサを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。