検索
ホームページウェブフロントエンドjsチュートリアルPostCSSを使用して独自のCSSプリプロセッサを構築する方法

How to Build Your Own CSS Preprocessor With PostCSS

キーポイント

  • 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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
node.jsは、型を使用してストリーミングしますnode.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AM

node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。 ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます

Python vs. JavaScript:パフォーマンスと効率の考慮事項Python vs. JavaScript:パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1)解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2)JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源:その実装言語の調査JavaScriptの起源:その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏:JavaScriptをパワーする言語は何ですか?舞台裏:JavaScriptをパワーする言語は何ですか?Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1)解析段階で抽象的構文ツリー(AST)を生成します。 2)ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3)実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来:傾向と予測PythonとJavaScriptの未来:傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript:開発環境とツールPython vs. JavaScript:開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか?証拠を調べるJavaScriptはCで書かれていますか?証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1)C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2)V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3)JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません