> CSS・Sass > Sassで配列を使おう|リストとマップの違いをしっかり理解しよう!
Sassで配列を使おう|リストとマップの違いをしっかり理解しよう!

Sassで配列を使おう|リストとマップの違いをしっかり理解しよう!

SassはCSSを効率的に記述するために開発されたメタ言語(拡張言語)です。
Sassについての基礎知識は下記の記事で紹介しています。

Sassでは、スタイルの管理や再利用性を高めるために変数($colorなど)をよく使います。
しかし、複数の値をまとめて扱いたいときに、毎回別々の変数を定義していたのでは、かえってコードが煩雑になってしまいます。
そんなときに役立つのが配列です。
この記事ではSassで配列として利用できるリストマップについて紹介します。

Sassにおける配列の基本

配列とは、複数の値を1つの変数でまとめて扱えるデータ構造のことを言います。
Sassでは配列を扱うためにリストマップという方法があります。

Sassの配列は、見た目に影響しないがCSSの生成に役立つ裏方データとして活用されることが多く、設計の柔軟性を大きく高めてくれます。

配列はCSSに出力されないメタ情報である

Sassの配列(リスト・マップ)は、基本的にはCSSにはそのまま出力されません
つまり、スタイルを記述するための「補助情報」や「制御用のデータ」として使われます。

$colors: red, blue, green;

上記のようなリストが定義されていても、それだけではCSSには出力されません。
このリストをループ処理で展開したり、特定の値を取り出してプロパティに適用することで出力されます。
配列(リスト・マップ)を利用すると、コーディングの自動化や省力化が可能になります。

@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

リスト(List)とは?

リストは、順番のある値の集合体(配列)です。
カンマやスペースで区切った複数の値を1つの変数にまとめて保持できます。

scss記述例|リストを定義

$colors: red, blue, green;   // カンマ区切りで複数の値を保持
$font-sizes: 12px 14px 16px; // スペース区切りで複数の値を保持

リストを使うメリット

リスト(配列)を使うと下記のようなメリットがあります。

  • 繰り返し処理(@each)と組み合わせて効率的にCSSを生成できる
  • 色やサイズなど、複数の値を一括で管理・変更できる
  • リスト内で要素ごとの値の取得・追加・検索などの操作が可能

リストの詳しい使い方

リスト(配列)についての詳しい使い方や使用例は下記の記事で紹介しています。

マップ(Map)とは?

マップは、キーと値のペアをセットで管理する連想配列です。
キー(インデックス)に文字列を利用し、値に対してわかりやすい名前をつけて保持することができます。

scss記述例|マップを定義

$theme-colors: (
// キー: 値; として記述する
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745
);

マップを使うメリット

マップ(連想配列)を使うと、リスト(配列)のメリットに加え、下記のようなメリットがあります。

  • 意味のある名前で値を管理できる(可読性が高い)
  • 順序に依存せず値を取得できる
  • 階層的な構造(多次元配列)でもわかりやすく対応できる

マップの詳しい使い方

マップ(連想配列)についての詳しい使い方や使用例は下記の記事で紹介しています。

最後に

Sassでは、複数の値をまとめて扱える「リスト」と「マップ」という便利な機能が用意されています。
どちらもCSSには直接出力されない補助的なデータ構造ですが、うまく活用することでコードの再利用性・可読性・保守性が大きく向上します。
配列・連想配列を使いこなして、CSSを構造的でスマートにコーディングしていきましょう。

この記事が気に入ったらシェアしてください

関連記事

Sassで配列を使おう|マップ(連想配列)を徹底的に使いこなす!

Sassで配列を使おう|マップ(連想配列)を徹底的に使いこなす!

Sassで配列を使おう|リスト(配列)を徹底的に使いこなす!

Sassで配列を使おう|リスト(配列)を徹底的に使いこなす!

Sassで配列を使おう|リスト(配列)のセパレーターについて考えてみた

Sassで配列を使おう|リスト(配列)のセパレーターについて考えてみた

Sassの@if条件分岐をマスターしよう!使い方・応用・注意点まとめ

Sassの@if条件分岐をマスターしよう!使い方・応用・注意点まとめ

Sassでデバッグする方法まとめ|@debug/@warn/@errorの基本と実例

Sassでデバッグする方法まとめ|@debug/@warn/@errorの基本と実例

Sassの@mixinとプレースホルダー、どっちを使う?使い分けのコツを紹介

Sassの@mixinとプレースホルダー、どっちを使う?使い分けのコツを紹介

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)