web-dev-qa-db-ja.com

CSS前処理（SASSまたはLESS）とCSS後処理

そこで、 pleeease.io などのCSS後処理を行うためのいくつかのフレームワークに出くわしましたが、CSS後処理を使用する主な利点やユースケースは何でしょうか。ミックスイン/関数の前処理でほぼ同じことを達成できると思います。 SASSやLESSなどの前処理言語と組み合わせてどのように使用されますか？

web-developmentcss
2
aug

後処理と前処理の違いは、少なくともプログラミング言語の場合には存在しません。どちらも、フォーマットA（人間が作成したもの）からフォーマットB（必要ですが、書くのは不便）への変換について説明しています。

“compiler”:   A    -> B

== CSS-related examples ==
less:         LESS -> CSS
sass:         SASS -> CSS
sass:         SCSS -> CSS
autoprefixer: CSS  -> CSS
minifier:     CSS  -> CSS
pleeease:     CSS  -> CSS

== Other examples ==
c preprocessor: C        -> C without macros
gcc:            C        -> machine code
pandoc:         LaTeX    -> HTML
pandoc:         Markdown -> HTML
pandoc:         LaTeX    -> Markdown

それらの例に関するいくつかの観察：

  • 入力形式と出力形式は同じにすることができます。これは、コードティディエ、ミニファイア、およびソースを何らかの形で単純化するその他のプロセッサの場合です。例えば。 Cプリプロセッサは、ソースコード内のマクロと定数を展開します。これは、プレフィックスなしのCSSディレクティブをプレフィックス付きのバリアントに展開するautoprefixerと同等です。

  • プロセッサには、それぞれが変換の一部を実行する複数のサブプロセッサが含まれる場合があります。

    • pleeeaseは、オートプレフィックスやミニファーなどのさまざまなプロセッサを介してコードをパイプできます。
    • Cコンパイラには、プリプロセッサステージが含まれています。
    • Pandocには、入力（Markdownドキュメントなど）を共通のデータ構造に解析し、この中間表現を別のプロセッサに渡してターゲット形式（HTMLなど）に変換するプロセッサがあります。 Pandocのアーキテクチャはかなりプラグイン可能であり、追加の前処理段階を追加できます。たとえば、これは、構文をより標準的なMarkdownフォームに拡張することにより、PandocのMarkdown方言で参考文献参照を実装するために使用されます。

Pleeeaseがそれ自体をプリプロセッサではなくポストプロセッサと呼ぶ場合、これは行われます…

  • lESSやSASSのようなプリプロセッサとの差別化。 LESSとSASS/SCSSのセールスポイントは、CSS構文を拡張または置き換えることです。 Pleeeaseは、代わりに既存のCSSコードの移植性を高めたいと考えています。
  • pleeeaseが開発後に使用されることを示すため。 SASSを使用してスタイルを作成する場合は、コンパイラーを実行する必要がありますbeforeブラウザーにスタイルシートを提供します。そしてafterスタイルを作成したら、結果に対してpleeeaseを実行して、古いブラウザーにとってより口に合うようにすることができます。

要約すると、プログラミング言語の領域で前処理と後処理を区別する技術的な理由はありません。 「後処理」という用語はこの分野では広く使用されていないため、「前処理」、「コンパイル」、または「変換」に置き換えて優先する必要があります。

1
amon

前処理と後処理の目標はまったく異なります。

  • 前処理は、プログラマーがより簡単で保守しやすいコードを書くのを支援することに焦点を当てています
  • 後処理は、コードのランタイム効率の向上に焦点を当てています

プリプロセッサも効率的なコードの領域を掘り下げることは事実です（1つの一般的な例は縮小化です）。その理由は、単純にそれらが可能だからです。 LESSコンパイラーによって実装された単純なパスで実現できるのに、なぜ開発者に別のツールを使用してLESS出力を縮小させるのですか？

プリプロセッサが開発者の意図にどのようにアクセスできるかを見ると、プリプロセッサはポストプロセッサよりも優れた最適化を提供できる可能性があります。実際には、専用のツールを使用すると、より良い結果が得られます。

プリプロセッサとポストプロセッサの両方を使用しない理由はありませんが、実際の有用性はケースバイケースで判断する必要があります（ツールとユースケースの両方の組み合わせが影響を与える可能性があります）。プリプロセッサの一部の機能をオフにし、ポストプロセッサに依存することで、最良の結果を得ることが完全に可能です。

2
Tibos