Sass - .scss map

scss

$grid-end: 8;
    $gutter: 30px;
    * {
      box-sizing: border-box;
    }
    .container {
      max-width: 960px;
      margin: 0 auto;
    }
    .box {
      height: 100px;
      background-color: gray;
    }
    .row {
      display: flex;
      margin-left: - $gutter/2;
      margin-right: - $gutter/2;
    }
    @for $i from 1 through $grid-end {
      .col-#{$i} {
        flex: 0 0 (100% / $grid-end) * $i;
        max-width: (100% / $grid-end) * $i;
        padding-left: $gutter/2;
        padding-right: $gutter/2;
      }
    }


    // sass map1
    $gray-light:  #777;
    $brand-primary: #009AFF;
    $brand-accent: #D84315;
    $base-color:(
      default: $gray-light,
      primary: $brand-primary,
      accent: $brand-accent
    );
    @each $name, $value in $base-color {
      .bg-#{$name} {
        color: lighten($value, 10%);
        background-color: $value;
        border-color: darken($value, 10%)
      }
    }
    
    // sass map 2
    $color-config:(
      default:(
        class: 'default',
        color: $gray-light,
        bg: #fff,
        border-color: #ccc
      ),
      primary:(
        class: 'primary',
        color: #fff,
        bg: $brand-primary,
        border-color: $brand-primary
      ),
      accent:(
        class: 'accent',
        color: #fff,
        bg: $brand-accent,
        border-color: $brand-accent
      )
    );
    @each $name, $value in $color-config {
      $class: map-get($value, class);
      $color: map-get($value, color);
      $bg: map-get($value, bg);
      $border-color: map-get($value, border-color);
      .btn-#{$class}{
        border-color: $border-color;
        background-color: $bg;
        color: $color
      }
    }