SCSS/CSSで基本カラーを設定して効率よくまとめる

SCSS/CSSには様々なカラーコントロール機能がありまして、この機能を利用すればカラーバリエーションの作成やカラー修正など効率的に行うことが出来るようになります。

本ページは昨日の自分が見たら助かると思うように簡単にまとめました。（ご意見、ご指摘等ありましたらご連絡ください！）

#共通のSCSSファイルを作成する

カラー設定は他のSCSSファイルから共通して使用すると効率が良いです。なのでカラー設定用のSCSSファイルを最初に作成します。

共通の変数は「_variables.scss」というファイル名にします。
「＿」で始まるファイルはコンパイルされません。

_variables.scss

 $base-color:#536A97;

とりあえず変数「$base-color」という変数を一つ作成しました。

#変数を使用する

先ほどカラー設定した変数を使用してみましょう。

base.scss

 @import"_variables.scss";

h1{
   color;$base-color;
}

適当なファイル（base.scss)を作成したら、カラー設定した「_variables.scss」をインポートします。
あとは使いたい場所に「＄base-color」を記述するだけです。
ここではh1プロパティに設定した変数を使用してみました。
これをコンパイルすると下記のようになります。

base.scss

 h1{
   color:#536A97;
}

一つだけだとあまりありがらみがないですが、例えば下記のように複数のプロパティに同じカラーを設定した場合、「$base.color」のカラーを変更するだけで全てのカラーが反映されますので、修正が楽に行えますね。

base.scss

h1 {
    color: $base-color;
    font-size: 32px;
}
h2 {
    color: #fff;
    background-color: $base-color;
}
section {
    border: solid 1px $base-color;
}