検索
ホームページウェブフロントエンド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 までご連絡ください。
JavaScriptの文字列文字を交換しますJavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

独自のAjax Webアプリケーションを構築します独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQueryの楽しみとゲームプラグイン10 jQueryの楽しみとゲームプラグインMar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます! Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲーム ゲームプログラミングの「Hello World」には、JQueryバージョンがあります。 ソースコード jQueryクレイジーワードコンポジションゲーム これは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。 ソースコード jquery鉱山の掃引ゲーム

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか?独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか?Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

jQuery Parallaxチュートリアル - アニメーションヘッダーの背景jQuery Parallaxチュートリアル - アニメーションヘッダーの背景Mar 08, 2025 am 12:39 AM

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します。 ダウンロードしてください

jqueryとajaxを使用した自動更新Divコンテンツjqueryとajaxを使用した自動更新DivコンテンツMar 08, 2025 am 12:58 AM

この記事では、JQueryとAjaxを使用して5秒ごとにDivのコンテンツを自動的に更新する方法を示しています。 この例は、RSSフィードからの最新のブログ投稿と、最後の更新タイムスタンプを取得して表示します。 読み込み画像はオプションです

Matter.jsを始めましょう:はじめにMatter.jsを始めましょう:はじめにMar 08, 2025 am 12:53 AM

Matter.jsは、JavaScriptで書かれた2D Rigid Body Physics Engineです。このライブラリは、ブラウザで2D物理学を簡単にシミュレートするのに役立ちます。剛体を作成し、質量、面積、密度などの物理的特性を割り当てる機能など、多くの機能を提供します。また、重力摩擦など、さまざまな種類の衝突や力をシミュレートすることもできます。 Matter.jsは、すべての主流ブラウザをサポートしています。さらに、タッチを検出し、応答性が高いため、モバイルデバイスに適しています。これらの機能はすべて、物理ベースの2Dゲームまたはシミュレーションを簡単に作成できるため、エンジンの使用方法を学ぶために時間をかける価値があります。このチュートリアルでは、このライブラリのインストールや使用法を含むこのライブラリの基本を取り上げ、

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか?ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか?Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

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 プラットフォームで実行できます。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター