Sass

「Syntactically Awesome Style Sheets」の略です。Sassは、HTML文書のレイアウトや書式を定義するために使われる言語、カスケーディングスタイルシート（CSS）の拡張機能です。完全互換のCSS 構文を使用しながら、CSS変数やネストしたルールなどの追加機能を提供するため、CSSをより効率的に記述でき、編集もしやすくなります。

標準のCSSの欠点の1つは、変数をサポートしていないことです。たとえば、同じ色の複数のスタイルがある場合、その色を各スタイルで個別に定義する必要があります。色を変更することにした場合は、CSS文書内のすべての箇所で変更しなければなりません。Sassでは、色を変数として定義し、その変数を使用するすべてのスタイルに割り当てることができます。色を変更することにした場合、文書内で最初に定義した箇所を1回変更するだけで済みます。

次の例は、SassでCSS変数を定義して使用する方法を示しています。

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

Sassはネストしたルールにも対応しているため、開発者はより効率的なコードを記述できます。次の例では、.buttonクラスが#top pスタイルの中にネストされています。

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

コンパイルすると、上のコードは次のCSSを生成します。

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

SassにはWeb開発者にとっていくつかの利点がありますが、Sass文書はWebブラウザーでは認識されません。そのため、SassファイルはHTML文書で使用する前に、CSSへコンパイルする必要があります。これは、CSSをWebサーバーにアップロードする前に、Compass.appやKoalaなどのプログラムを使ってローカルで行えます。また、SassをCSSにコンパイルするPHPまたはRubyスクリプトを使って、サーバー上でコンパイルすることもできます。