Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【備忘録】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 から実装された機能のようです。

// マップ(テーマカラーセット)を準備
$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;
    }
}
yuusuke510
色々勉強中です。
d2cdot
テクノロジーの力で『伝えたいコトを伝わるカタチに』
https://www.d2cdot.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away