CSSプリプロセッサの説明

CSSプリプロセッサは、フロントエンドWeb開発者のワークフローの主力になりつつあります。CSSは非常に複雑で微妙な言語であり、CSSを使いやすくするために、開発者はSASSやLESSなどのプリプロセッサを使用することがよくあります。

CSSプリプロセッサは、特別なコンパイラを使用して記述されたコードをコンパイルします。次に、それを使用してCSSファイルを作成します。このファイルは、メインのHTMLドキュメントから参照できます。

CSSプリプロセッサを使用する場合、プリプロセッサが配置されていない場合と同じように、通常のCSSでプログラミングできます。良いことは、利用できるオプションがもっとあることです。SASSなどの一部には、必要に応じて中括弧を省略できるなど、ドキュメントの記述をさらに簡単にすることを目的とした特定のスタイル標準があります。

もちろん、CSSプリプロセッサは他の機能も提供します。提供される機能の多くは、構文にわずかな違いがあるだけで、プリプロセッサ間で非常によく似ています。したがって、あなたはあなたが望むほとんどすべてのものを選ぶことができ、あなたは同じことを達成することができるでしょう。より便利な機能のいくつかは次のとおりです。

変数

プログラミング言語で最も一般的に使用される項目の1つは変数であり、CSSには特に欠けています。変数を自由に使用できるようにすることで、値を1回定義し、プログラム全体で再利用できます。SASSでのこの例は次のとおりです。

$yourcolor: #000056 .yourDiv { color: $yourcolor; }

SASS yourcolor変数を一度宣言することで、定義を再入力することなく、ドキュメント全体でこれとまったく同じ色を再利用できるようになりました。

ループ

言語のもう1つの一般的な項目はループですが、CSSには他に欠けているものがあります。ループを使用すると、同じ命令を複数回繰り返すことができ、何度も再入力する必要はありません。SASSの例は次のとおりです。

@for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; } }

このループにより、マージンサイズを変更するために同じコードを複数回記述する必要がなくなります。

If / Elseステートメント

CSSに欠けているさらに別の機能はIf / Elseステートメントです。これらは、特定の条件が真である場合にのみ一連の命令を実行します。SASSでのこの例は次のとおりです。

@if width(body) > 500px { background color: blue; } else { background color: white; }

ここで、背景色はページの本文の幅に応じて色が変わります。

これらは、CSSプリプロセッサの主要な機能のほんの一部です。ご覧のとおり、CSSプリプロセッサは非常に便利で用途の広いツールです。多くのWeb開発者がそれらを使用しており、少なくとも1つを学ぶことを強くお勧めします。

詳しくは:

  • 最高のCSSチュートリアル
  • SASSドキュメント://sass-lang.com/
  • SASS、Webガーニッシュ用のプリプロセッサ
  • LESSドキュメント://lesscss.org/
  • スタイラスドキュメント://stylus-lang.com/