Sass

Sass（Syntactically Awesome Style Sheets）は、CSS（Cascading Style Sheets）をより効率的に記述するためのスタイルシート言語です。ハンプトン・キャトリンによって設計され、ネイサン・バイゼンバウムによって開発されました。Sassは、CSSの記述を簡略化し、再利用性を高めるための様々な機能を提供します。

Sassの構文

Sassには、主に2つの構文が存在します。

インデント構文
初期に開発された構文で、Hamlと同様に、コードブロックの区切りにインデント（字下げ）を使用します。この構文を指して単に「Sass」と呼ぶこともあります。
SCSS (Sassy CSS)
CSSに似た構文で、波括弧 `{}` でブロックを定義し、セミコロン `;` でステートメントを区切ります。よりCSSに近く、移行が容易なため、現在ではSCSSが主流となっています。

SassScript

Sassには、SassScriptというスクリプト言語が組み込まれており、変数、関数、制御構造などのプログラミング的な要素を使用することができます。これにより、動的なスタイルシートの生成や、繰り返し処理などが容易になります。SassScriptはSassファイルの記述を強力にサポートしています。

Sassの機能

Sassは、CSSにはない様々な機能を提供し、CSS記述をより効率的にします。

変数
変数を使用することで、色やサイズなどの値を一箇所で定義し、再利用できます。変数は`$`記号で始まり、コロン`:`で値を代入します。数値、文字列、色、ブーリアン型などのデータ型を扱うことができます。
ネスティング
CSSでは、要素の親子関係を記述する際に、セレクタを繰り返し記述する必要がありますが、Sassでは、要素をネストして記述することができます。これにより、コードの可読性が向上し、より構造的なスタイルシートの記述が可能になります。
ミックスイン
ミックスインは、複数のスタイルルールをまとめた再利用可能なコードブロックです。ミックスインを定義することで、同じコードを何度も記述する必要がなくなり、コードの保守性が向上します。また、引数を渡すこともできます。
反復処理
`@for`、`@each`、`@while`などの制御構文を使用することで、変数を適用して繰り返し処理を行うことができます。これにより、リストや配列などのデータを扱う際に効率的なコード記述ができます。
セレクタの継承
`@extend`を使用することで、あるセレクタのスタイルを別のセレクタに継承させることができます。これにより、共通のスタイルを簡単に適用することができ、CSSファイルのサイズを削減できます。

Sassの処理

Sassのコードは、SassインタプリタによってCSSに変換されます。変換されたCSSは、ウェブブラウザで解釈され、ウェブページのスタイルが適用されます。Sassは、sassまたはscssファイルの保存時に自動的に監視し、変更をCSSファイルに反映させることができます。

Sassの実装

Sassは、公式にはRubyで実装されていますが、PHPを含む様々な言語で実装されています。また、C++による高性能な実装であるlibSassや、JavaによるJSassなど、様々な実装が存在します。近年では、RubyによるSassが低速で、C++版が機能追加しにくくなったため、Dart言語によるdart-sassが開発され、より高速で機能豊富なSass環境が提供されています。

その他

Sassは、メタ言語であり、妥当なCSSは妥当なSCSSです。
Mozilla Firefoxの拡張機能であるFirebugとの統合もサポートされています。

Sassは、CSSの記述を効率化し、再利用性を高めるための強力なツールです。大規模なプロジェクトや、複雑なスタイリングを行う際に非常に役立ちます。

もう一度検索