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

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

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

講座の始まり

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

配列の基本

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

$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フォルダで確認できます。

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

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

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

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

チャプター4　「配列とマップの基本を理解する」のまとめ

チャプター4では、Sassで使用される配列とマップについて学びました。

　複数のデータを一つの変数で管理することができる「配列」や「マップ」を使うことで、スタイルをより効率的に記述することができます。

チャプター

次章では、Sassの基本の「ファイルの分割とインポートを理解する」学びます。

前のチャプター

Sass/SCSS入門講座 ３章 変数と演算の基本を理解する チャプター３では、Sassで使用される変数と演算について解説します。 「CSSを効率的に書く！Sassの入門講座」の第３章です。この講座については以下から確認できます。 …

次のチャプター

Sass/SCSS入門講座 ５章 ファイルの分割とインポートを理解する チャプター５では、Sassで使用されるファイルの分割やインポートについて学びます。 「CSSを効率的に書く！Sassの入門講座」の第５章です。この講座については以下から…