SASSのデフォルト変数

場合によっては、変数の値がまだ定義されていないが、 コード内で使用する必要がある場合、 デフォルト値を設定することができます。 その後に!defaultのマークを付けます。

注意すべき点は、変数にすでに以前に値が 割り当てられている場合、その値は以前のままですが、 新しい空の変数を作成した場合、 デフォルト値が指定されることです。

styles.scss$name: "John";
$name: "Bob" !default;
$new_name: "Mark" !default;

#main {
  name: $name;
  new_name: $new_name;
}

上記のコードをコンパイルした結果は以下のようになります：

styles.css#main {
  name: "John";
  new_name: "Mark";
}

変数にnullを設定した場合、 !defaultはその変数を 値を持たないものとみなします：

styles.scss$name: null;
$name: "Bob" !default;

#main {
  name: $name;
}

コンパイル後、次のようになります：

styles.css#main {
  name: "Bob"; 
}