【備忘録】sass の変数、配列、マップ（連想配列的な？）

変数

// 変数hogeに色セット
$hoge: rgb(255,255,255);

// 使うときは↓こう
a {
    background-color: $hoge;
}

変数名の頭には $ を付ける。
= ではなく、 : で値代入。

配列

// 変数itemsにカンマ区切りで複数指定
$items: itemA, itemB, itemC, itemD;

// 使うときは↓こう
@each $item in $items {
    .#{$item}-bg {
        background: url(./img/#{$item}_bg.png) 0 0 no-repeat;
    }
}

マップ（連想配列的な？）

マップはsass v3.3 から実装された機能のようです。

// マップ（テーマカラーセット）を準備
$theme-colors: (
  primary: #ffffff,
  secondary: #cccccc,
  success: #28a745,
  info: #aaaaaa,
  warning: #ffc107,
  danger: #dc3545,
  light: #f8f9fa,
  dark: #343a40
);

// 使うときは↓こう（単体利用）
a {
    background-color: map-get($theme-colors, 'primary');
    color: map-get($theme-colors, 'dark');
}

// 使うときは↓こう（each利用）
@each $key, $color in $theme-colors {
    .#{$key} {
        background-color: $color;
    }
}