CSSプリコンパイラとPostCSSの3つの銃士

この記事には2つの部分があります。最初の部分はCSSプリコンパイラーです：Sass、Less、Stylus、それらの比較、そして2番目の部分は人気のあるPostCSSです。

なぜCSSプリコンパイラのようなものがあるのですか？これは、CSSの欠点についてです。変数がない（新しい仕様はすでにサポートされています）、ネストがない、プログラミング能力が弱い、コードの再利用性が低いなどです。
これらの欠点により、記述されたCSSの保守性が低下し、多くの反復コードが含まれます。これらの欠点を補うために、CSSプリコンパイラーが誕生しました。CSSプリコンパイラーに関して言えば、これらの3人の剣士Sass、Less、およびStylusは切り離せません。歴史上、Sassが最初に登場したのは、最も早く登場したため、最も完成度が高く、さまざまな豊富な機能を備えていました。Lessの登場は、Bootstrapの人気を伴っていたため、多数を獲得しました。最後に、TJ Great God（King Dashen）によって開発されたStylusは、その簡潔な構文のため、プログラミング言語に似ており、書くのがとてもクールです。それでは、以下で簡単な比較をしてみましょう。

Less＆SCSS：
.wrap { 表示：ブロック; }

Sass：
.wrap
display：block

スタイラス：
.wrap
表示ブロック
Sassは当初、インデント、スペース、改行によって階層関係を制御していました。Pythonを書いた学生は、Pythonに慣れることはありません。その後、Scssの従来のCSSのような構文をサポートしました。Lessは非常に満足のいくものであり、CSSスタイルを使用します。これは、初心者にとって非常に使いやすく、既存のプロジェクトの移行にも役立ちます。スタイラスはSassスタイルの構文を使用して記述でき、CSSスタイルとも互換性があります。

3つすべてが変数の定義をサポートしていますが、定義方法は異なります。

少ない：
@smallFont：12px;
small { font-size：@smallFont; }

Sass：
$ smallFont：12px;
small { font-size：$ smallFont; }

スタイラス：
smallFont = 12px
small
font-size smallFont

Stylusで宣言された変数は、変数名がCSSのリテラル値と同じである場合、CSSのリテラル値を上書きすることに注意してください。

面白いことがあります。通常、誰もがコンポーネントライブラリと接触することが多いと思います。CSSプリコンパイラは、コンポーネントライブラリの準備でスタイルを作成するために使用され、カスタムスタイルはによって提供されます。外部変数の受け渡し。Ant.designやElementUIと同じように機能します。これにはCSS変数のスコープが含まれます。3つのプリコンパイルのうち、Sass / Stylusは同じで、Lessは別のケースです。以下の例を見てみましょう。

少ない：
@color：赤;
.content-1 { 色：@color; }

@color：黒;
.content-2 { 色：@color; }

/ *コンパイルされたCSS * /
.content-1 { color：black; }

.content-2 { color：black; }宣言で使用される場合、Lessの変数は、複数の割り当てがある場合、最後の割り当ての値を取ります。これは、上記の.content-1、content-の色です。 2つはすべて黒い理由です。Lessの変数のこの機能に基づいて、元のコンポーネントライブラリまたはクラスライブラリの変数の値を簡単に変更できます。Lessファイルをインポートした後、特定の変数に値を割り当てるだけで済みます。同時に、特定の隠れた危険ももたらします。異なるコンポーネントライブラリまたはクラスライブラリが同じ変数名を使用する場合、上書き状況が発生するため、モジュラーアプローチを採用する必要があります。

サス：
$ color：赤;
.content-1 { 色：$ color; }

$ color：黒;
.content-2 { 色：$ color; }

スタイラス：
色=赤;
.content-1
色の色

色=黒;
.content-2
色色;

/ *コンパイルされたCSS * /
.content-1 { color：red; }

.content-2 { color：black; }上記のように、Sass / Stylusの変数に複数の割り当てがある場合、宣言の前に最新の割り当ての値が使用されるため、.content-1の色.content-2の色は赤で、.content-2の色は黒です。同時に、Sass / Stylusによって記述された異なるコンポーネントライブラリまたはクラスライブラリの変数は競合しませんが、これは変数の値をオーバーライドすることによってスタイルをカスタマイズするための課題を提起します。どうすればよいですか？テストポイントはここにあります。Sass/ Stylusは変数宣言「存在しない場合は代入」を提供します。

サス：
$ a：1;
$ a：5！デフォルト;
$ b：3！デフォルト;
// $ a = 1、$ b = 3

スタイラス：
a = 1
a：= 5
b = 3
// a = 1、b = 3
コードを注意深く見ると、間違いなく理解できます。「存在しない場合は割り当て」構文を使用すると、コンパイラは次のようになります。同じ名前の変数が以前に定義されているかどうかを確認します。定義がない場合は変数定義を実行します。同じ名前の変数が以前に定義されている場合は、割り当て操作は実行されません。したがって、Sass / Stylusを使用するコンポーネントライブラリまたはクラスライブラリで「存在しない場合は割り当てる」方法で変数を定義し、インポートする前に同じ名前で変数を定義することで、目標を達成できます。

同時に、私たちが定義する変数は、CSSによって宣言された値として使用できるだけでなく、セレクターと属性にネストすることもできます：

少ない：
@prefix：ui;
@prop：背景;
。@ {prefix}-ボタン{ @ {prop}-色：赤; }

Sass：
$ prefix：ui
KaTeX解析エラー：「EOF」が必要です。21番目の位置に「＃」があります：…背景; 。＃̲ { プレフィックス}-ボタン{ ＃{$ prop}-色：赤; }

スタイラス：
prefix = ui
prop = background
。{prefix}-ボタン
{prop} -色は赤

変数関連のコンテンツは基本的にカバーされており、次のステップはスタイルの再利用です。スタイルの再利用に関しては、ミックスインと継承について言及する必要があります。ミックスインの場合、これら3つのプリコンパイラーにも異なる実装があります。

もっと少なく：

.mixin-style（@color：red）{ color：@color; }

.content { .mixin-style（red）; }

Sass：
@mixin mixin-style { color：red; }

.content { @include mixin-style; }

スタイラス：
mixin-style（color）
color color

.content
mixin-style（red）//または
Lessのmixin-styls redトランスペアレントミックスインでは、CSSクラスをミックスインとして直接導入でき（このメソッドはあまりお勧めしません）、パラメーターを渡すことができる上記のミックスインを提供することもできます; Sassは非常に満足のいくものであり、ミックスインは@mixinと@includeを介して定義および導入されます。;スタイラスはミックスインの明示的な宣言を必要とせず、属性と同様に導入される透過的なミックスインの機能も提供します。

次に、継承について説明します。その中で、Sass / Stylusは@extendキーワードを介してスタイルを継承し、Lessは疑似クラスを介して継承します。

Sass / Stylus：

.message { padding：10px；border：1px solid #eee；}

.warning { @extend .message；色：＃e2e21e；}

もっと少なく：

.message { パディング：10px; ボーダー：1px実線#eee; }

.warning { ＆：extend（.message）; color：＃e2e21e; }長所と短所は自分で判断できます。より詳細な比較については、GuYilingの記事を確認してください。

CSSプリプロセッサについて話した後、人気のあるPostCSSについて話しましょう。PostCSSに関しては、人々は常にPostCSSとは何かと尋ねます。この質問については、公式Webサイトでその定義を見てみましょう。

PostCSSは、JSプラグインを使用してスタイルを変換するためのツールです。これらのプラグインは、CSSをリントし、変数とミックスインをサポートし、将来のCSS構文、インラインイメージなどをトランスパイル
できます。したがって、PostCSSはJSプラグインを使用してスタイルを変換するためのツールであると理解しています。ツール。PostCSSとCSSプリプロセッサの位置は異なります。前のコンテンツを読んだ後、誰もがCSSプリプロセッサの役割を知っています。PostCSSの主な役割はlint cssであり、CSS Next構文をサポートし、プレフィックスを自動的に追加します。プラグイン基本的にCSSプリプロセッサの機能をカバーできると同時に、多くのプリプロセッサでは不可能な機能を実現できます。PostCSSはとても素晴らしいので、詳しく見てみましょう。

PostCSSの場合、最初に理解する必要のあるいくつかのポイントがあります。

1. PostCSSはCSSプリプロセッサの代わりにはなりませんが、PostCSSに置き換えることはできます。既存のプロジェクトの場合、PostCSSを使用するのは簡単です。使用しているプリプロセッサまたはビルドツールに関係なく、移行コストはそれほど高くありません。
2. PostCSSの利点は、開発のすべての側面をカバーできる豊富なプラグインエコロジーにあり、独自のプラグインを簡単に開発できます。同時に、PostCSSはJavascriptを使用するため、Javascript自体とその豊かなエコロジーにより、PostCSSにさらに強力な機能が提供されます。
3. PostCSSでは、最もよく知られているのはAutoprefixであり、Autoprefixは多数の前処理で使用されます。PostCSSは、最新のアーキテクチャ設計に依存しており、歴史の負担を取り除き、プラグインシステムを使用して、CSSの堅牢性をよりエレガントに強化しています。

PostCSSアーキテクチャはおおよそ次のとおりです。

JavaScriptオブジェクトに対応するPostCSSを介してCSSをAST（抽象構文木）に変換し、プラグインを介してASTをトラバースし、追加、削除、変更し、最後にCSSファイルを生成します。これはプロセス全体であり、非常によく似ています。バベルのアーキテクチャに。

その中で、CSSはASTに解析され、ASTはシリアル化されてCSSを生成します。PostCSSがそれを行ってくれます。プラグインの開発とASTの操作方法に注意を払うだけです。

したがって、以下では、簡単な例を使用して、PostCSSプラグインを開発する方法を説明します。そのようなスタイルがあります：

.content { color：red; }特定のスタイルで「color：red」のようなスタイルルールを検出した場合、「background-color：red」のようなルールを自動的に追加する必要があります。

PostCSSは、プラグインによって作成されたテンプレートを公式に提供しています。ダウンロードするだけです。

git clone [email protected]：postcss / postcss-plugin-boilerplate.git

次に、フォルダのディレクトリを入力し、次のコマンドを入力します。

このとき、ノードの起動時にいくつかの情報を入力する必要があります。その後、プラグインのテンプレートフォルダーが自動的に生成されるか、対応するフォルダーが入力されます。この時点で、おなじみのpackage.json、index.jsが表示されます。およびその他のファイル。npmを使用して依存関係をインストールした後、プラグインのロジックをindex.jsファイルに書き込むことができます。同様に、npmを介してプロジェクトに依存関係をインストールし、index.jsのrequireを介してそれらをインポートできます。これはJavaScriptに依存する利点です。

index.jsのデフォルトのコンテンツは次のとおりです。

var postcss = require（ 'postcss'）;

module.exports = postcss.plugin（ 'postcss-practice'、function（opts）{ opts = opts || {};

// Work with options here

return function (root, result) {

    // Transform CSS AST here

};

}）;
書かれたプラグインコードは次のようになります。

const postcss = require（ 'postcss'）;

const postcss = require（ 'postcss'）;

module.exports = postcss.plugin（ 'postcss-practice'、function（opts）{ opts = opts || {}; console.log（opts）; //ここでオプションを操作する

return function (root) {
    root.walkRules(rule => {
        console.log(rule.selector);
        rule.walkDecls(decl => {
            if (
                decl.prop === 'color' &&
                decl.value === 'red'
            ) {
                rule.append({
                    prop: 'background-color',
                    value: 'red'
                });
            }
        });
    });

};

}）;
非常に簡単です。説明：root.walkRulesはすべてのCSSルールをトラバースします。rule.selectorを介してルールの各セットのセレクターを取得し、rule.walkDeclsを介してルールの各セットのスタイル宣言をトラバースできます。 .prop、decl.valueは、スタイル宣言の属性と値を取得します。上記は、属性が「background-color」で値が「red」であるかどうかを判断し、条件が満たされると、新しいスタイル宣言がルールに挿入されます（ここでは簡単にするために、background-colorかどうかは考慮されません）。宣言はすでに存在します）。

プラグインが作成された後、プラグインが妥当かどうかをテストするために、index.test.jsもサンプルプロジェクトに含まれます。以下は、index.test.jsのテストコードです。

var postcss = require（ 'postcss'）;

var plugin = require（ './ index.js'）;

function run（input、output、opts）{ return postcss（[plugin（opts）]）。process（input）.then（result => { expect（result.css）.toEqual（output）; expect（result.warnings（ ）.length）.toBe（0）; }）; }

//ここにテストを書く

it（ '何かをする'、（）=> { return run（ 'a {color：red;}'、'a {color：red; background-color：red;}'、{}）; }）; then Run ：「npmruntest」の結果：

次に、他のプラグインと同じように、パッケージ化してリリースし、プロジェクトにインストールして使用することができます。PostCSSは、ASTを操作し、開発を簡単に完了するのに役立つ多くの便利な機能も提供します。