Sassの魅力を知った瞬間✨変数・マップ型【備忘録】

今回は、Sassについてのお話です！

私はこれまで、Webアプリケーションを個人開発で作ったことが何度かあります。
ただ、かなり小規模なものしか作ったことがなく、世間で「便利や！」って言われてるSassの必要性や魅力をあまり感じていませんでした。

しかし、今年、ついにSassの魅力に気が付くことができました！
そんな、「凄い！」と思ったSassの記述方法について、いくつか紹介していきます。

本記事は、Code Polaris 2021 Advent Calendar 2021の20日目の記事です。

※今回の記事では、SCSS記法を利用しています。
※もし、記事への補足・改善点(修正点)などアドバイスがあれば、コメント頂けますと嬉しいです！

Sassとは？

CSSを拡張したメタ言語。

変数

まずは、変数について紹介していきます。
CSSでスタイル調整をしているときに、何度も出てくる値や色を変数に格納し、プロパティの値として変数を指定するだけで適用させることができてしまいます。

変数宣言のやり方は以下です。

$変数名: 値;

使用するコード

今回、使用していくコードはこちらになります。

<div class="about">
  <h1>Sassを使ってみよう！</h1>
  <h2>変数を使ってみよう！</h2>
  <p class="color1">文字色1</p>
  <p class="color2">文字色2</p>
  <p class="color3">文字色3</p>
  <hr />
</div>

はい、初期の文字色です。

使ってみる

今回は、文字の色を変えてみようと思います！
まず、変数に、使用したい色を格納していきます。

<style lang="scss">
$blue1: #0000ff;
$black: #000;
$blue2: #9999ff;
$blue3: #6666ff;
$blue4: #0000cc;
</style>

青系の色など、5色ほど変数に格納してみました！
それでは、これらの変数を利用してみましょう！

以下のように、通常通り、styleタグ内で各要素・クラスに文字色を指定していきます。
指定する際の値が変数になっています。これにより、先ほど色を格納した変数の値を適用できます。

h1 {
  color: $blue1;
}

h2 {
  color: $black;
}

.color1 {
  color: $blue2;
}

.color2 {
  color: $blue3;
}

.color3 {
  color: $blue4;
}

画面上では以下のようになっています。

無事、変数の値が適用され、文字色が変化していますね！

次に、<hr />の色も変えてみましょう。「Sassを使ってみよう！」(<h1>)と同じ色に変更してみましょう。
やることは、<hr />に色を指定するだけです。以下をstyleタグ内に追記してみます。

hr {
  border-color: $blue1; // h1に指定していたのと同じ変数
}

border-colorを指定しています。指定している値は、<h1>に指定していたのと同じ変数です！
それでは、画面で確認してみましょう。

無事、<hr />の色が変わりましたね！
同じ色や値を何度も指定したいときなど、変数が使えるととても便利ですよね！

Map型

Map型とは？

Sassには、Number型やString型、Boolean型のようなデータ型が存在します。Map型もその1つです。
以下のような形式で記述します。

$変数名: ( "キー名1": 値1, "キー名2": 値2 );

キー名と値が1つの組み合わせになります。カンマ(,)区切りで指定していきます。

また、Map型でまとめた値を適用するときには、map-get()という専用の関数を使います。
この専用の関数を利用することで、キーに対応する値を利用することができます。

map-get($変数名, "キー名")

第1引数に変数名、第2引数にキー名を渡します。キー名は文字列で指定する点、お間違えなく！

使用例

続いて、Map型の使い方について説明していきます。
以下の画像をご覧ください。

いくつかの色を使っています。
このような場合に、Map型を使うと、色をまとめておくことができます。

$colors: (
  "mainColor": #4b7eb1,
  "backgroundColor": #edeeef,
  "title": #004eff,
);

例えば、背景色を、今回用意したMap型($colors)を利用して指定する場合...

background-color: map-get($colors, "backgroundColor")

用意したマップ型($colors)で、backgroundColorというキー名を指定しています。
これにより、背景色に、マップ型($colors)のbackgroundColorというキーの値が指定されました。

もちろん、マップ型は、色の指定以外でも利用することが可能です。

おわりに

Sassの変数とマップ型についてご紹介いたしました。Sassでできることはもっとありますが、少しでも、魅力・凄さが伝われば、嬉しいです！
今回、Sassの魅力を知ることができたので、自分も今後は積極的に活用できたら...と思っています。

お読み下さり、ありがとうございました！

参考資料・参考文献

Sass 公式
平澤隆、森田壮著 『Web制作者のためのSassの教科書』(2017年初版、2020年第1版第3刷)