Sass を使った CSS のテクニックの蓄積について、今回は検証を行なってみました。@importについては「SassでCSSテクニックを蓄積する – @importを使う」にて解説しています。 @import は必要だとして !default はどうなのか？という Tips となります。
　

!defaultとは何か

変数を設置する際に、以下のようの使います。

$value: 150 !default;

機能は、「 !default の変数設置”前”に、同名の変数が設置されていなければ処理される」というものです。言葉では分かりにくいので以下のソースと出力結果を見てください。

// !default設置前に変数を作る
$value1: 999;

// !default設置
$value1: 150 !default;

// 出力結果は999となる
@debug $value;

通常の !default を使わない変数であれば、上書きするので「999」を出力するのですが、!default を使うと上書きされません。だから何だ？と思われるかもしれませんね。では以下のソースを見てください。

※[_param.scss]ファイル
$DEFAULT_box_shadow: 0px -10px 10px orange;

※[_lib.scss]ファイル
@import "param";

/*----------------------------------------------------------
シャドウ
----------------------------------------------------------*/
$DEFAULT_box_shadow: 0px -10px 10px red, 10px 10px 10px green, -10px 10px 10px blue !default;
@mixin box-shadow($value...) {
    @if(not existed($value...)) {
        $value: $DEFAULT_box_shadow;
    }
	-webkit-box-shadow: $value;
	   -moz-box-shadow: $value;
	    -ms-box-shadow: $value;
	        box-shadow: $value;
}

@import を使用して、パラメータと !default 変数の設置を分けました。こうすることで、 _param.scss ファイルのパラメータを弄るだけで全ての影の調整ができるようになります。別プロジェクトでサイトを作ることになったとしましょう。CSS3 の box-shadow を毎回コピペしますか？Sassだと _param.scss のパラメータを変更するだけです。

パラメータとテクニック実装を別ファイルで管理する

!default の使い方が分かったところで運用方法を考えてみます。影のデフォルト値やカラムの幅数など設定に必要なパラメータ群を「_param.scss」としてまとめ、管理します。こうすることでプロジェクト毎にテクニック集をファイルごと @import するだけで運用が可能です。しかしここで疑問が発生しました。 !default を使うメリットはあるのでしょうか？以下のソースでも問題ないはずです。

※[_param.scss]ファイル
$DEFAULT_box_shadow: 0px -10px 10px orange;

※[_lib.scss]ファイル
@import "param";

/*----------------------------------------------------------
シャドウ
----------------------------------------------------------*/
//$DEFAULT_box_shadow: 0px -10px 10px red, 10px 10px 10px green, -10px 10px 10px blue !default; 不要？
@mixin box-shadow($value...) {
    @if(not existed($value...)) {
        $value: $DEFAULT_box_shadow;
    }
	-webkit-box-shadow: $value;
	   -moz-box-shadow: $value;
	    -ms-box-shadow: $value;
	        box-shadow: $value;
}

何も問題がありません。わざわざ !default 値を設定する意味も分かりません。テクニックをどんどん蓄積していけば、自ずと設定するパラメータの量も増えていきます。そうなると、 _param.scss でパラメータの詳細をコメントで記述する必要があるでしょう。もちろん、パラメータが少ないうちから詳細のコメントは書くべきです。 !default があれば、 _param.scss で定義していないパラメータがあっても正常に動作する、くらいです。結局全てのパラメータの説明を書くならば特に必要性を感じません。

使うパラメータを明示化する

テクニック集は、案件を担当すればするほど、実験を積み重ねれば積み重ねるほど増えていきます。パラメータ数はゆうに500個を超えたとしましょう。全てのパラメータと説明を _param.scss に記載します。確かに詳細は _lib.scss を直接見れば分かりますしパラメータの設定漏れ自体あってはならないことですので、全て !default 無しで設定します。想像してみてください。どれが重要なパラメータなのでしょうか？どこを今回再設定したのでしょうか？
　
!default を使う意味とは、 _param.scss にて再設定したパラメータを明示化するという意味が含まれています。これは重要なことです。再設定が繰り返されていれば !default の値を見直すべきかもしれません。しかし、 !default を使っていなければ分からないでしょう。なんせ500個もパラメータがあるのですから。(diffツールなんて使う必要はありません。)

!defaultの意味とは

たいした意味がないような説明もしましたが、 _param.scss で定義していないパラメータがあっても正常に動作するというのも大切です。明示化も大切です。 !default を使う意味はこの2つに集約されるかと思います。機能上は不要です。使いやすさ、見やすさ、汎用性を考えると必要、ということです。規模が大きくなればなるほど効果は増していくでしょう。

運用方法を再考する

テクニックを充実させる際に、外部パラメータ化した方がいいものか、 @mixin や @function の引数にした方がいいものなのか区別をつけていきます。外部パラメータ化した方がいいものはどんどん !default 変数にします。外部パラメータ化する予定のものは、 @mixin や @function 定義の直前にでも設置します。後々、使っていると重要なパラメータであると分かれば _param.scss にコメントを記載します。
　
作成したテクニック用のファイルは、再設定するパラメータ群をまとめた「 _param.scss 」と、処理をまとめた「 _lib.scss 」です。「 _lib.scss 」で「 _param.scss 」を @import します。マークアップする際のファイル「 testcording.scss 」などで 「 _lib.scss 」を @import します。「 _lib.scss 」ファイルが膨大になれば用途別にファイルを分けます。

　
　
今回は変数の初期化機能、!defaultの設定を見てきました。そして私の考える運用も見てきました。あくまで私自身の考えですので突っ込みどころもあるかと思います。その時はぜひ連絡をください。一緒にSassを盛り上げていければ嬉しいです。