前回、CSSの構造化にSassを利用してみる（1）でSassの基本的な利用方法を書きました。
ですが、まだSassの機能を利用して効率的にCSSを生成するのに利用出来る機能は沢山あります。

ここからは少々複雑になり、多少のプログラミング知識が必要になります。
今回は、Sassのスクリプト機能を取り上げたいと思います。

変数

変数を利用するとCSSの管理が劇的に楽になります。
例えばBOXサイズをサイト内で共通化し、200pxに設定した後、220pxに変更しなければならない時は、変数を使用すると1箇所の変更のみで対応可能です。

コンパイル前：style.scss

// 変数宣言
$width: 200px;

// 変数利用
#main {
    width: $width;

    .content {
        width: $width;
    }
}

↓
コンパイル後：style.css

#main {
    width: 200px; }
    #main .content {
        width: 200px; }

また、CSSセレクタ名やプロパティ名に変数を使用したい場合は「#{}」で変数を括ります。

コンパイル前：style.scss

$name: foo;
$attr: border;
p.#{$name} { #{$attr}-color: blue; }

↓
コンパイル後：style.css

p.foo {
    border-color: blue; }

データタイプ

変数には次の値が代入出来ます。

• 数値：1、2.3、40px　※整数、浮動小数点、単位
• 文字列：”foo”、’bar’、baz　※引用符有無
• カラー値：blue、#ff00ff、rgba(255, 0, 0, 0.5)　※カラー文字列、16進数、カラー関数
• 真偽値：true、false

変数のデフォルト値

変数には「!default」を末尾に記述し、デフォルト値（初期値）を設定する事が出来ます。

コンパイル前：style.scss

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
    content: $content;
    new-content: $new_content;
}

↓
コンパイル後：style.css

#main {
  content: "First content";
  new-content: "First time reference"; }

演算子

演算子を使用すれば、CSS内でさまざまな値を計算する事が出来ます。

数値演算子

加算（＋）、減算（－）、乗算（＊）、除算（／）、剰余（％）が利用出来ます。

コンパイル前：style.scss

p {
    width: 10px + 2px;
}

↓
コンパイル後：style.css

p {
    width: 12px; }

※除算演算子と「／」記号について
CSSプロパティ内で「／」記号を使用するケースがあり、除算演算子と重複してしまいます。
そのため、除算を行なうには、次の条件を1つ満たさなければなりません。

1. 変数が使用されている事
2. 値が大括弧（）で括られている事
3. 式に他の演算子が使用されている事

コンパイル前：style.scss

p {
    font: 10px/8px;               // 除算なし
    $width: 1000px;
    width: $width / 2;            // 除算あり：変数使用
    height: (500px / 2);          // 除算あり：大括弧を使用
    margin-left: 5px + 8px / 2px; // 除算あり：式に他の演算子を使用
}

↓
コンパイル後：style.css

p {
    font: 10px/8px;
    width: 500px;
    height: 250px;
    margin-left: 9px; }

また、意図的に変数を除算対象にしたく無い場合は「#{}」で変数を括ります。

コンパイル前：style.scss

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}

↓
コンパイル後：style.css

p {
    font: 12px/30px; }

カラー演算子

カラー値でも四則演算が使用出来ます。

コンパイル前：style.scss

p {
    color: #010203 + #040506;
    color: #010203 * 2;
    color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

↓
コンパイル後：style.css

p {
    color: #050709;
    color: #020406;
    color: rgba(255, 255, 0, 0.75); }

文字列演算子

文字列を連結させるには「＋」記号を使用します。
引用符がある文字列の連結は、先頭文字列の引用符の有無に従います。

コンパイル前：style.scss

p:before {
    cursor: e + -resize;          // 引用符なし
    content: "Foo " + Bar;        // 引用符あり
    font-family: sans- + "serif"; // 引用符なし
}

↓
コンパイル後：style.css

p:before {
    cursor: e-resize;
    content: "Foo Bar";
    font-family: sans-serif; }

また、引用符内で演算したい場合は「#{}」で値を括ります。

コンパイル前：style.scss

p:before {
    content: "I ate #{5 + 10} pies!";
}

↓
コンパイル後：style.css

p:before {
    content: "I ate 15 pies!"; }

変数と演算子を使用すると、CSS管理を更に効率化出来ます。
ここまで来るとSassの単体テストが必要な気がしてきます…