HTML CSS - 2017-09-15

Sassで配列、連想配列の取得方法

Sassの配列の書き方

$items: sample1, sample2, sample3;

@each $item in $items {
  .#{$item}--bg {
      background: url(./img/#{$item}_bg.png) 0 0 no-repeat;
  }
}

出力結果

.sample1-bg {
  background: url(./img/sample1_bg.png) 0 0 no-repeat;
}
.sample2-bg {
  background: url(./img/sample2_bg.png) 0 0 no-repeat;
}
.sample3-bg {
  background: url(./img/sample3_bg.png) 0 0 no-repeat;
}

Sassの連想配列の書き方

$sample_color:(
  abc:pink,
  def:black,
  ghi:blue,
  jkl:red
);

@each $sample, $color in $sample_color {
  .color--#{$sample} {
     color: $color;
  }
}

出力結果

.color--abc {
  color: pink;
}

.color--def {
  color: black;
}

.color--ghi {
  color: blue;
}

.color--jkl {
  color: red;
}
Related Posts

Related Posts

便利なSassの@mixin集めました

2017-03-31

Gulp導入からSassコンパイルするまで

2017-04-02

Datatables.jsで検索andページングandソート機能を実装

2017-08-01

WordPressのカスタムフィールドやカテゴリを検索対象に含める方法

2018-02-07