SCSS - map vs list / @for vs @each


Posted by TempuraEngineer on 2022-04-15

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


📖

SASS official site


#SCSS







Related Posts

MTR04_1127

MTR04_1127

SlowHTTPTest筆記-1

SlowHTTPTest筆記-1

巢狀救星三部曲(2) - ES6 Generator Function

巢狀救星三部曲(2) - ES6 Generator Function


Comments