Sassでテーマ用CSSを作成する

HTML&CSS

fujihara

2019.10.31

どうもfujiharaです。この時期でも暑く感じるのは自分だけでしょうか？

本日はテーマ用CSSを作成する際に調べていたらSassの !defaultがすごく便利だったのでご紹介します。

Default Values

Default Values この値は Sassで変数を使用する際に値の最後に追記すると既に変数として宣言されている場合は、変数を上書きしません。

テーマ用設定

以下のようにファイル構成をします。


--src
  --_base
    _variables.scss
    ...
  --themes
    theme-a.scss
    theme-b.scss
  common.scss

ファイル

_variables.scss


$mainColor: green !default;
$heading1Color: orange !default;
...

common.scss


import "_base/variables";

body {
  color: $mainColor;
}
h1 {
  color: $heading1Color;
}
...

theme-a.scss


$mainColor: red;
$heading1Color: pink;
...

/* 最終行 */
@import '../common';

説明

_variables.scss は変数用のファイルになっています。テーマごとに変えたい変数を定義します。
common.scss は基本的なスタイル設定になります。ここでレイアウト等設定してもらいます。(テーマごとに変えたい値は _variablesで定義されたものを使います。
最後にtheme-a.scss ですが、ファイルの先頭で_variables.scss 内で使用されている変数を初期設定するための記述をします。その後 common.scss を読む事で theme-a.scss と _variables.scss で定義されている変数名が同じものは thema-a.scss のものが有効になります。