
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を生成できる
- 色やサイズなど、複数の値を一括で管理・変更できる
- リスト内で要素ごとの値の取得・追加・検索などの操作が可能
リストの詳しい使い方
リスト(配列)についての詳しい使い方や使用例は下記の記事で紹介しています。
- リストを定義する
$list: ( 値, 値, 値, ... )
- リストの要素を取得する
nth( $list, n )
- リストに要素を追加する
append( $list, $value, $separator )
- リストの要素を検索する
index( $list, $value )
- リストの要素数を取得する
length( $list )
- リストを結合・統合する
join( $list1, $list2, $separator )
zip( $list1, $list2, … )
マップ(Map)とは?
マップは、キーと値のペアをセットで管理する連想配列です。
キー(インデックス)に文字列を利用し、値に対してわかりやすい名前をつけて保持することができます。
scss記述例|マップを定義
$theme-colors: ( // キー: 値; として記述する primary: #007bff, secondary: #6c757d, success: #28a745 );
マップを使うメリット
マップ(連想配列)を使うと、リスト(配列)のメリットに加え、下記のようなメリットがあります。
- 意味のある名前で値を管理できる(可読性が高い)
- 順序に依存せず値を取得できる
- 階層的な構造(多次元配列)でもわかりやすく対応できる
マップの詳しい使い方
マップ(連想配列)についての詳しい使い方や使用例は下記の記事で紹介しています。
- マップを定義する
$連想配列名: ( キー: 値, キー: 値, キー: 値, ... )
- マップから値を取得する
map.get( $map, $key )
- マップに要素を追加・更新する
map.set( $map, $key, $var )
map.merge( $map, ( $key: $var ) )
- 複数のマップを結合する
map.merge( $map, ( $key: $var ) )
- マップから要素を削除する
map.remove( $map, $key )
- マップのキーを検索する
map.has-key( $map, $key )
最後に
Sassでは、複数の値をまとめて扱える「リスト」と「マップ」という便利な機能が用意されています。
どちらもCSSには直接出力されない補助的なデータ構造ですが、うまく活用することでコードの再利用性・可読性・保守性が大きく向上します。
配列・連想配列を使いこなして、CSSを構造的でスマートにコーディングしていきましょう。
この記事が気に入ったらシェアしてください