特徴1: 変数
プロジェクトでは、さまざまな CSS クラスに同じルールを含めることができます。 たとえば、Web ページに異なる背景色を持つ 20 個のボックスがあるとします。
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
その後、クライアントが考えを変え、より大きなボックスを希望したとします。 そこで、各クラスの width および height プロパティを 1 つずつ増やす必要があります。 これは50クラスにもなり得ます。 実際のプログラミングでは、これはフラストレーションがたまることでしょう。 上で述べたように、これは小さな変更のための大きな努力の例です。
より効率的に行うにはどうしたらよいでしょうか。
Sass は変数という解決策を提供します。 他のプログラミング言語と同様に、値を格納し、後でそれを再利用するために変数を使用することができます。
変数の定義：
$variable-name: value;
上の例に戻って、私たちが width & height :
$box-width: 100px;
$box-height: 100px;
後で変更が必要になったときに、その値を一度変更するだけでよいので定義する場合。
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}
CSS 自体も変数をサポートするようになりましたが、IE & の古いバージョンの他のブラウザでは動きません。
特徴その2：ネスト
標準 CSS ではネストをサポートしない。 別のクラスの中にクラスを書くことはできません。
たとえば、クリック可能なリンクを持つナビゲーション メニューを以下のように HTML で定義してみましょう。 しかし、入れ子にしないと、CSS では次のようになります:
nav がすべての親タグのため、それぞれのタグについて、アンカーの疑似クラス（hover）についてさえ Nav と記述しなければなりませんでした。 しかし、Sass は入れ子に対応しています。
では HTML よりも構造的なコードを記述することが可能です。 nav クラスの後にクラスを書く必要はなく、冗長性も防げます。
重要: クラスを 3 レベルより深くネストすることはお勧めしません。
特徴 3: ミキシン
CSS 規則に変数を使用する方法を学びました。 しかし、規則のグループを一緒に使用する必要がある場合はどうすればよいでしょうか。 Sass にはミキシンと呼ばれる機能があり、それを行うことができます。
ミキシンとは何ですか
ミキシンは、CSS 宣言を一緒にグループ化する Sass 関数です。
Mixin を作成するには、@ mixin コマンドに続けて名前を指定するか、または関数として作成し、パラメータを追加することができます。 つまり、毎回4行のフォントルールを記述する代わりに、my-font ミキシンを使用することができます。
p {
@include my-font;
}
Mixin を使用することは、コードの重複を防ぐ良い方法です。
Feature #4: Imports
最後に、Sass import 機能で巨大な CSS ファイルを小さく分割することが可能です。 延々と続く 1 つの大きなファイルよりも、小さなファイルを維持するほうが & 読みやすくなります。
実は、CSS にもインポート機能があります。 しかし、それは異なる方法で動作します。 CSS では、ファイルをインポートするたびにサーバーに HTTP リクエストを送信します。 Sass は HTTP リクエストなしでそれを行うので、より速いアプローチです。
必要なことは、@ import コマンドであなたの Sass ファイルを別の Sass ファイルにインポートすることです：
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
ファイルパスで .scss 拡張子を使用しなくても、Sass はそれを理解します。