LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-09-10

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;
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1