CSS プリプロセッサとポストプロセッサ

私はフロントエンドを始めたばかりなので、昨日、初歩的なフロントエンドに必要な知識についてマスターが書いた本を読み、それから一つずつ検索し始めました。 以下は私のCSSの検索結果です。プリプロセッサとポストプロセッサについて、この知識を皆さんと共有したいと思っていますが、一方で、将来的には読みやすくなります。ですので、興味のある方は覗いてみてはいかがでしょうか。

「Zhao Lei のブログ」より転載、元のアドレス: http://zhaolei.info/2014/01/04/css-preprocessor-and-postprocessor/

CSS プリプロセッサーといえば、誰もがよく知っているものですが、この記事の焦点は、そこから抽出された CSS ポストプロセッサーを紹介することです。これらは、ここ 1 年ほどのフロントエンド コミュニティの新しいトレンドでもあります。
CSS ポストプロセッサーを抽象化した後、CSS 開発モデルにいくつかの変更を加えます。概念から始めましょう。

CSS プリプロセッサ

大まかに言えば、ターゲット形式が CSS であるプリプロセッサは CSS プリプロセッサですが、この記事では特に、最終的に CSS を生成することを目的とするドメイン固有言語について言及します。
Sass、LESS、Stylus は現在最も主流の CSS プリプロセッサです。

例

以下では LESS を例にします:

少ない

1 2 3 4 5 6 7

.opacity(@opacity: 100) { opacity: @opacity / 100; filter: ~"alpha(opacity=@{opacity})"; } .sidebar { .opacity(50); }

上記の DSL ソース コード (LESS) を CSS にコンパイルします:

1 2 3 4

.sidebar { opacity: 0.5; filter: alpha(opacity=50); }

ご覧のとおり、コンパイル前とコンパイル後はまったく異なる言語です。

実装原則

1. DSL ソース コードの解析ツリーを取得します
2. 動的に生成された関連ノードを含む解析ツリーを静的解析ツリーに変換します
3. 静的解析ツリーを CSS 静的解析ツリーに変換します
4. CSS 静的解析ツリーを CSS コードに変換します

実際の CSS プリプロセッサはもう少し複雑です。ほとんどの関数は独自の DSL とネイティブ CSS の両方をサポートする必要があり、どちらの場合でも 1 つの処理を実行する必要があるからです。

メリットとデメリット

• 利点: 言語レベルのロジック処理、動的な機能、改善されたプロジェクト構造
• 欠点: 特殊な構文、高いフレームワーク結合、高い複雑さ

CSS ポストプロセッサ

CSSポストプロセッサーとは、CSSを処理して最終的にCSSを生成するプリプロセッサーのことで、広義のCSSプリプロセッサーです。
私たちはずっと前から CSS ポストプロセッサを使用してきましたが、最も典型的な例は CSS 圧縮ツール (clean-css など) ですが、これまで個別に説明されていませんでした。
最近人気の Autoprefixer もあります。これは、Can I Use のブラウザー サポート データに基づいて、互換性の問題を自動的に処理します。

例

Autoprefixer を例に挙げます:

1 2 3 4 5 6

.container { display: flex; } .item { flex: 1; }

上記の標準 CSS を、互換性を処理する運用環境 CSS にコンパイルします:

1

1 2 3 4 5 6 7 8 9 10 11 12

.container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .item { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }

2

3

4

5

6

7

8

9

10

11

12

.container {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

.item {

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;スパン>スパン>スパン>

}

テーブル>

ご覧のとおり、コンパイル前とコンパイル後のコードは両方とも CSS です。

Sublime Text を使用している場合は、Package Control を通じて Autoprefixer プラグインをインストールして体験することができます。

実装原則

1. ソースコードをCSSとして解析し、分析ツリーを取得します
2. CSS 解析ツリーの後処理
3. CSS 解析ツリーを CSS コードに変換します

メリットとデメリット

• 利点: CSS 構文を使用し、モジュール化が容易で、CSS の将来の標準に近い
• 欠点: 論理処理能力が限られている

開発モデルの変更

元の開発モデルは次のとおりです:

<code><span class="input"><span class="prompt">DSL 源代码 -> 生产环境 <span class="constant">CSS
</span></span></span></code>

元の開発モデルと比較して、新しい開発モデルの最大の変更点は、標準の CSS プログラミングを指向しており、互換性と最適化の部分を CSS ポストプロセッサーに任せて自動補完していることです。

<code><span class="input"><span class="prompt">DSL 源代码 -> 标准 <span class="constant">CSS -> 生产环境 <span class="constant">CSS
</span></span></span></span></code>

将来の多くの CSS 標準が CSS ポストプロセッサ レベルで実装された後、一部のプロジェクトでは標準 CSS プログラミングの使用に戻ることもあります。

<code><span class="input"><span class="prompt">标准 CSS（包含未来标准的后处理器实现）-> 生产环境 <span class="constant">CSS
</span></span></span></code>

ここではいくつかの簡単な比較を示します:

对比项	预处理器	后处理器	两者同时使用
语言学习成本	DSL	CSS √	DSL
目标输出结果	生产环境 CSS	标准 CSS √	标准 CSS √
兼容性处理耦合度	高，依赖 DSL 框架	低，依赖后处理器 √	低，依赖后处理器 √
可编程性	高，语言级逻辑处理 √	中，扩展 CSS 语法	高，语言级逻辑处理 √

ここでは、CSS プリプロセッサと CSS ポストプロセッサを同時に使用し、それぞれが最適な機能を実行することをお勧めします。

私は魔法の杖で、将来的には次のような傾向になると予測しています。

• 単一の機能に焦点を当てた小さな CSS ツール ライブラリが増えています
• CSS スタイル ライブラリが全体的なソリューションからモジュール式の組み合わせソリューションに変更されました
• 将来の CSS 標準の一部が CSS プリプロセッサでサポートされています
• ネイティブ CSS と CSS ポストプロセッサの組み合わせが新たな選択肢になります

優れた CSS ポストプロセッサ フレームワーク

やり直し

Rework は、効率的でシンプル、拡張可能なモジュール式の CSS プリプロセッサです。
最初のバージョンは 2012 年 9 月にリリースされました。それは、Stylus の作者である TJ Holowaychuk によって掘られた新しい穴でした。

実際、彼は CSS ポストプロセッサーのモデルを使用しており、その上に Stylus スタイルのインデントとネストを模倣するツール styl があり、その CSS プリプロセッサー機能の一部は これは、作業を開始する前に Rework によって達成されます。 css-whitespace
に基づいたスタイル ライブラリがいくつかあります。これらは CSS 標準ドラフトまたは CSS 標準提案を参照します。これは、Rework、rework-vars、rework-font-variant などの CSS の将来の標準をサポートするのと同等です。 rework-calcなどrework-color-function

少しめまいがするように聞こえますか?これは、そのモジュール性が非常に優れていることを示しています。

など、実際のニーズに応じて CSS フレームワークを組み合わせることができます。 Myth

の特徴を要約します: Rework

CSS 解析オブジェクトを JavaScript で直接操作、拡張が簡単
必要に応じてモジュールを自由に組み合わせ、CSS ツール ライブラリをカスタマイズできます
CSS ポストプロセッサのモデルがモジュールの傾向を決定する CSS の将来の標準
サーバー側に加えて、ブラウザ環境での実行もサポートしています

まだ非常に若いため、蓄積するにはさらに時間が必要です。 Rework

PostCSS

は、JavaScript を通じて CSS を変更できるようにする CSS ポストプロセッサ フレームワークです。 PostCSS その最初のバージョンは 2013 年 11 月にリリースされ、
プロジェクトから抽象化されたフレームワークです。 Autoprefixer

には次の特徴があります: PostCSS

• に非常に似ていますが、より高レベルの API を提供し、拡張が容易です Rework
既存のソース マップに基づいて新しいソース マップを生成できます
エディター プラグインの開発を容易にするために、元の CSS 形式をより適切に保持するようにしてください
• より若い場合、成功例は Rework 1 件のみですAutoprefixer

実際、

は元々 Autoprefixer に基づいていましたが、後に作者はさらに多くのニーズ (上記のリスト) を必要としたため、Rework ホイールを作成しました。 PostCSS

ついに

CSS ポストプロセッサーの出現により、CSS ワークフローはより明確になりましたが、現在ではまだ成熟には程遠く、改善できる点はまだたくさんあります。

たとえば、

は構文プレフィックス レベルの互換性のみを提供し、IE フィルターの互換性などの問題に特に対処するいくつかの小さなモジュールも必要とします。 Autoprefixerたとえば、CSS で単独で使用される画像の CSS スプライトを自動的に分類して結合できます。
たとえば、プロジェクトでのアイコン フォント グリフの実際の使用状況に基づいて、フォント サイズを自動的に最適化できます。

各モジュールが特定の問題に焦点を当てている場合、ほとんどの場合、大規模で包括的な一元化されたフレームワークよりも信頼性が高くなります。

趣味として、

または Rework に基づいた CSS ポストプロセッサを作成することを検討してみてはいかがでしょうか? PostCSS