【Sass】くり返しの数値やカラーコードは変数で管理しよう

【Sass】変数の基本について

「変数」とは、あらかじめ任意の名前を決めて値を代入しておくことで、その変数を任意の場所で呼び出す事で変数に代入したプロパティの値を使用することができる機能です。

変数の宣言と呼び出し方について

変数名の宣言については、$(ダラー)マークの直後に任意の変数名を指定し、コロンの後に値を記述します。これで変数を宣言しましたので宣言済みの変数を参照するには、使いたい箇所で宣言した＄(ダラー)変数名を書く事で呼び出す事でがきます。

$commonColor : #224949;

.leadText{
  color: $commonColor;
    &--list{
      border-bottom:solid 1px $commonColor;
    }
}

変数は、別ファイル内で宣言している場合も@importを使ってインポートすれば、どこでも参照する事ができます。インポートする場合は必ず変数を宣言したSassファイルが先に読み込まれるようにインポートします。

@import "module";    // module.scssにて、$commonColorを宣言済み

.leadText{
  color: $commonColor;
    &--list{
      border-bottom:solid 1px $commonColor;
    }
}

変数名で使えない文字について

変数名は、英数字、アンダースコア、ハイフンを使うことができます。しかし、半角数字から始まる名前や＠(アットマーク)から始まる名前は、エラーとなります。また、２つ連続したハイフンで始まる変数名も使用できません。

エラーとなる変数名

$10width: 10px;
$@mt_１０: 10px;
$--mt_10: 10px;

セレクタ名やURLの一部を変数より参照する場合

変数は基本的に、プロパティの値を参照して使用しますが、変数を利用して画像のパス指定をしたい場合などあると思います。

$PATH: '../../common/image/bg/';
.header--bg{
  background :url($PATHabout-bg.jpg);
}

これはファイル名と変数の区別がつかなくなり、エラーとなります。この場合は、次のように変数名を#{}で囲う、インターポレーションを使う事で解決します。

$PATH: '../../common/image/bg/';
.header--bg{
  background :url(#{$PATH}about-bg.jpg);
}

これで無事、コンパイルすることができます。変数は他にも、繰り返し処理をするfor文や、条件分岐のif文を記述する際に用いられますのでSassを使いこなすうえで理解しておきたい機能です。

【CSS】CSS変数について

Sassの便利機能のひとつ変数について紹介しましたがCSSでも変数処理ができます。Sassいらずまでとはいいませんがコード管理にすぐれた機能です。

CSSカスタムプロパティについて

カスタムプロパティの宣言は、先頭にハイフンを2つ--付けて任意の名前を記述します。そして、:root擬似クラスで変数を宣言することで、どこでも使用可能となります。呼び出しは、簡単でvar(--変数名)で設定されている値を読み込むことができます。

:root {
  --box-middle: -150px;
  --bg-red: red;
}
.card {
  background-color: var(--bg-red);
  position: absolute
  top: calc(50% - var(--box-middle));
  left: calc(50% - var(--box-middle));
}

メディアクエリ内で変数を定義

Sassではメディアクエリ内で変数を定義することはできませんが、CSSカスタムプロパティでは可能です。

:root {
  --font-size: 1rem;
  --line-height: 1.5em;
}

@media (max-width: 1000px){
  :root {
    --font-size: 1.5rem;
  --line-height: 2.25em;
  }
}

body {
  font-size: var(--font-size:);
  line-height: var(--line-height);
}

JavaScriptでも利用可能

CSSカスタムプロパティはJavaScriptでも値を取得することができます。値を取得するにはwindow.getComputedStyleメソッドで適用したい要素のスタイルを取得し、getPropertyValueメソッドで値を取得します。

:root{
  --main-color: red;
}
.card{
  background: var(--main-color);
}

const SelectElement = document.querySelector('.card');
SelectElement.style.setProperty("--main-color", 'blue');

例えばクリックしたらテキストの色が変わる場合。

<div class="text-box" id="torigar">
  テキスト
</div>
<button>テキストカラー変更</button>

:root {
  --color-blue: blue;
  --color-green: green;
}
.text-box {
  color: var(--color-blue);
}

const button =  document.querySelector('button');
button.addEventListener('click', () => {
  const root = document.querySelector(':root'),
    rootStyle = getComputedStyle(root),
    torigar = document.querySelector('#torigar');
    torigar.style.color = rootStyle.getPropertyValue('--color-green');
});

CSSカスタムプロパティをJavaScriptで取得し、値を変更することができました。

まとめ

いかがでしたでしょうか。今回はSassの変数とCSSカスタムプロパティについてご紹介させていただきました。変数を使用するより、繰り返し利用される主のカラーコードや数値を変数化しておくことで、効率的なコード管理が可能になるかと思います。

以上となります。できる限りわかりやすく伝えようとしても書くのは難しいです。
コードや記事の書き方について気になるところがあれば、アドバイスいただけると嬉しいです。