sassでスタイルシートを書く

// css
.node-page .content h2.title {
  font-size: 2em;
}
.node-page .content strong {
  color: red;
}

cssでスタイルのルールを記述するには、タグを指定するためのセレクタを記述します。

同じようなセレクタの記述が何回も繰り返されて、うんざりしてしまいます。

// sass
.node-page {
  .content {
    h2.title {
      font-size: 2em;
    }
    strong {
      color: red;
    }
  }
}

しかしsassではセレクタをネストすることでスッキリと書くことができます。

このネスト構造は実際のタグの構造に一致していて、とてもわかりやすくなっています。また途中のクラス名が変更されたときなどでも、簡単に対応できることが分かるでしょう。

// sass
.node-page {
  border {
    style: solid;
    width: 1px;
    color: blue;
  }
}

また「margin-top」や「border-style」のようなプロパティ名もネストして書くことができます。

// css
.node-page {
  border-style: solid;
  border-width: 1px;
  border-color: bule;
}

このように展開されます。

＄main-container-width: 960px; // 変数を設定
.node-page .container {
  width: ＄main-container-width; // 変数を参照
}

sassではプログラミング言語のように変数を使うことができます。変数の書き方はcssのプロパティと同じですが、頭に「＄」をつけることで区別します。

.text-column {
  width: ＄main-container-width / 3 - 20px;
}

変数は計算することができます。基本的な四則演算（+,-,*,/,%）の他、便利な関数が用意されています。ユーザがカスタム関数を定義することも可能です。

＄main-text-color: #ff3b05; // 色
＄first-border: solid 1px #red; // 値のリスト
.main-text {
  color: ＄main-text-color;
  border-bottom: ＄first-border;
}

変数には数値だけではなく、cssプロパティに指定できる値ならなんでも設定することができます。

@include horizontal-list(10px);

またミックスインには引数を指定することができます。
この例ではリストアイテム間のマージンを10pxにしています。

ul.information-list {
  border: solid 1px #aaa;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

ul.important-list {
  border: solid 1px #aaa;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  color: red;
}

ミックスインは「cssコードの一部を部品化して繰り返し使う」ための仕組みですが、同様の仕組みに「継承」があります。
ここで二種類のリストを考えてみましょう。ひとつは周囲をボーダーで囲って目立つようにした「information-list」、もうひとつは重要な情報を伝えるためのimportant-listで、information-listの文字を赤くしたものだとします。
このスタイルシートはたとえば次のようになります。
ふたつのスタイルは最後の行を除いて同じものですが、ふつうはこのように重複して書く必要があります。

ul.important-list {
  // ul.information-listを継承
  @extend ul.information-list;
  // 異なる部分を追加
  color: red;
}

ここで継承の仕組みを使うとimportant-listの方は次のようになります。@extendを使ってimportant-listの設定を「受け継ぎ」次に相違点をつけくわえています。important-listがinformation-listの特殊化バージョンであると考えれば、この記述は論理的にも納得のいくものと言えるでしょう。
注意しなければならないのは、継承は子孫にも影響すると言うことです。たとえばimformation-list li を定義したとすると、それはimportant-list liにも受け継がれます。継承は単なるコードのコピーではありませんので、単純にコードの共有をしたいのであればミックスインを使うなど、上手に使い分ける必要があります。