Sass
配列
連想配列
変数

【備忘録】sass の変数、配列、マップ(連想配列的な?)

More than 1 year has passed since last update.

変数

// 変数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 から実装された機能のようです。

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