SCSS - map vs list / @for vs @each

map & list

	map	list
特點	SCSS版的object	SCSS版的array
取值	透過`key`	透過`index`
取值方法	map-get(map名, key)	nth(list名, index)

例子

/*map*/
$main:#459c69;
$green:('green100':$main, 'green90':lighten($main, 10%), 'green80':lighten($main, 20%));

/*list*/
$purple: #4f1068, #8420ac, #f3e2ff;

@for & @each

	@for	@each
特點	SCSS版的for	SCSS版的forEach
迭代	index	key與value組成的pair
搭配list	〇	△
搭配map	✖	〇

@for例子

無搭配
編譯前

@for $i from 1 to 4{
  .h-#{$i}{
      font-size:28 - $i * 4 + px;
  }
}

編譯後

.h-1 {
  font-size: 24px;
}
.h-2 {
  font-size: 20px;
}
.h-3 {
  font-size: 16px;
}

搭配list
編譯前

$purple: #4f1068, #8420ac, #f3e2ff;
@for $i from 1 to length($purple) + 1{
  .list-item:nth-child(#{$i}){
      background-color: nth($purple, $i);
  }
}

編譯後

.list-item:nth-child(1) {
background-color: #4f1068;
}
.list-item:nth-child(2) {
background-color: #8420ac;
}
.list-item:nth-child(3) {
background-color: #f3e2ff;
}

@each例子

搭配map
編譯前

$button-color:('danger':firebrick, 'success':green, 'primary':blue);
@each $key, $val in $button-color{
  .button-#{$key}{
      background-color: $val;
      color: white;
      width: 25px;
      height: 5px;
  }
}

編譯後

.button-danger {
  background-color: firebrick;
  color: white;
  width: 25px;
  height: 5px;
}

.button-success {
  background-color: green;
  color: white;
  width: 25px;
  height: 5px;
}

.button-primary {
  background-color: blue;
  color: white;
  width: 25px;
  height: 5px;
}

搭配list
編譯前

$purple: #4f1068, #8420ac, #f3e2ff;  
@each $color in $purple{
  $i:index($purple, $color);

  .list-item:nth-child(#{$i}){
      background-color:$color;
  }
}

編譯後

.list-item:nth-child(1) {
  background-color: #4f1068;
}
.list-item:nth-child(2) {
  background-color: #8420ac;
}
.list-item:nth-child(3) {
  background-color: #f3e2ff;
}