SASS言語入門
このチュートリアルでは、プリプロセッサであるSASSを学びます。 SASSは、CSSでプログラミングを行うことを可能にする別のプリプロセッサであるLESSの代替手段です。
実際、SASSには2つの構文オプションがあります。 最初のオプションもSASSと呼ばれ、2番目はSCSSと呼ばれます。 どちらも同じ機能セットをサポートしており、構文が少し異なるだけです。 ただし、SCSSはより新しく、広く使用されているため、このチュートリアルではSCSSを学びます。
では、SCSSの構文はCSSの構文に似ています。
つまり、CSSと同じ中括弧、引用符、セミコロンを見ることになります。
変数にフォントと色をすぐに割り当て、その後、それらの変数をセレクタ body のプロパティに割り当てるSCSS構文の例を見てみましょう。
$font: Helvetica, sans-serif;
$color: #333;
body {
font: $font;
color: $color;
}