Sass/SCSS入門講座４章配列とマップの基本を理解する

チャプター４では、Sassで使用される配列とマップについて解説します。

「CSSを効率的に書く！Sassの入門講座」の第４章です。この講座については以下から確認できます。

講座の始まり

CSSを効率的に書く！Sassの入門講座　全8章　この講座では「Sassの入門講座」を初心者の方でも問題ないように初歩の解説から小テストや実践を通して解説します。８章構成の講座になっていますので、気になってい…

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

配列の基本

　Sassでは、配列を使用することができます。配列は、複数の値をまとめて扱うことができます。

　以下のサンプルでは、$font-stackという配列を定義し、複数のフォントHelveticaとsans-serifを格納できます。

$font-stack: Helvetica, sans-serif;
body {
  font-family: #{$font-stack};
}

　配列内の要素を取り出すこともできます。

以下のサンプルでは、配列内の1番目の要素を取り出すことができます。

$first-font: nth($font-stack, 1); // "Helvetica"

マップの基本

SCSSでは、複数のキーと値の組を扱うことができる「マップ」というデータ型があります。

マップを使うと、複数のデータを一つの変数で扱うことができるため、データをより効率的に管理することができます。

マップを定義するには、「$マップ名: (キー1: 値1, キー2: 値2, …);」という書き方を使います。

$マップ名: (キー1: 値1, キー2: 値2, …);

以下のサンプルでは、$colorsというマップに、primary、secondary、tertiaryという3つのキーが定義されます。

$colors: (
  primary: #ff0000,
  secondary: #00ff00,
  tertiary: #0000ff
);

マップから値を取り出すには、「map-get(マップ名, キー)」を使います。

map-get(マップ名, キー)

以下のサンプルでは、$colorsマップからprimaryキーに対応する値を取り出すことができます。

color: map-get($colors, primary);

また、マップを使って、複数のスタイルをまとめて定義することもできます。

以下のサンプルでは、primary、secondary、tertiaryという3つのスタイルを一度に定義することができます。

.primary {
  color: map-get($colors, primary);
}

.secondary {
  color: map-get($colors, secondary);
}

.tertiary {
  color: map-get($colors, tertiary);
}

このように、SCSSでは、複数のキーと値の組を扱うことができる「マップ」を使うことで、データをより効率的に管理することができます。

やってみよう！配列とマップを使ったScssに置き換えてみよう！

　以下のScssファイル(教材のchapter04のquestion)はフォントを直接プロパティに複数指定しています。
また、3色の色を別々の変数に格納しています。

これを以下のように修正して見て下さい。

フォントを$font-stackという配列に格納し、その配列をfont-familyに指定するように変更しましょう。
３色のカラーを$colorsというマップに格納し、map-getを使ってcolorを指定できるように変更しましょう。

body {
  font-family: Arial, sans-serif;
}

$primary: #ff0000;
$secondary: #00ff00;
$tertiary: #0000ff;

.parent {
  color: $primary;
}

.child {
  color: $secondary;
}

.grandchild {
  color: $tertiary;
}

chapter04の解答

解答は以下のようになります。

※教材のChapter04-Answerにも同様の解答が入っています。

$font-stack: Arial, sans-serif;

body {
  font-family: $font-stack;
}

$colors: (
  primary: #ff0000,
  secondary: #00ff00,
  tertiary: #0000ff
);

.parent {
  color: map-get($colors, primary);
}

.child {
  color: map-get($colors, secondary);
}

.grandchild {
  color: map-get($colors, tertiary);
}

これらを実際に実装したサンプルはダウンロード教材のchapter04フォルダで確認できます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。