【SASS(SCSS)】!defaultの使い方【備忘録】

こんにちは！ワタナベです。

行きたかったライブのツアーが始まり、オンライン視聴で参戦しているのですが、やっぱり現地に行きたい！という思いが日に日に募っております(笑)
なんとか1公演だけチケット取れたのでその日が待ち遠しいです…(´ー｀)

今回は、SASS(SCSS)の「!default」についての備忘録を書きたいと思います！

サイトの構造は全く同じで、ページごとにカラーだけ変更したいという場面に遭遇したのですが、ページごとのスタイルを作るのはめんどくさいし手間…。
SASSって便利だし解決策があるのでは！と思い、検索！！！！！それっぽいのがありました！！！！！
結構ややこしかったので忘れないようにメモです(‘ω’)ノ

まず、変数のみのファイル「_variables.scss」があるとします。

$main_color: #eee !default;
$accent_color: #ff0000 !default;

ページごとに変更したいカラーに↑のように「!default」を付けます。

そして「common.scss」があるとして、こうなります。

@import “_variables”;

body{
background: $main_color;
}

h1{
color: $accent_color;
}

このままだと「_variables.scss」で設定したカラーが反映されますね。
ここからどうページごとにカラーを変更するのかというと…

まず別スタイル用の新しいSCSSファイルを作ります。（ここでは「other_style.scss」とします）
中身は以下のようにします。

$main_color: #f0f8ff;
$accent_color: #20b2aa;
@import ‘common’;

これで「$main_color」「$accent_color」は「other_style.scss」で定義したものになり、commonのスタイルにも反映されます。

これでページごとに読み込むスタイルを変えれば………完了です！
ややこしくてこの仕組みを理解するのに時間がかかってしまいましたが、便利ですね！

注意しなくてはいけないのは、反映したい定義を「!default」よりも前に記述することです。
「!default」は「あとから上書きされる」という意味ではなく「既に定義されている場合は上書きしない」という意味だからです。

もし上記の「other_style.scss」の内容を

@import ‘common’;
$main_color: #f0f8ff;
$accent_color: #20b2aa;

としてしまうと、反映したい変数の定義が「_variables.scss」の内容よりも下、そればかりでなく「common.scss」よりも下に来てしまうので、定義は変わりません。

▼THANKS！▼

それではまた次回、ご閲覧ありがとうございました♪