Sass Map에서 동일한 스타일의 반복 설명 생략

app.scss

.footer {
  padding: 70px 0;

  @mixin btn($color) {
    display: block;
    padding: 20px 30px;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    background-color: $color;
    text: {
      decoration: none;
      align: center;
    }
  }

  $map: (
    facebook: #4668b3,
    google: #de5745,
    twitter: #2fbbed,
    pinterest: #d94348,
    behance: #3079ff,
    dribbble: #eb6397
  );

  &__sns {
    &__list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      & > li {
        width: 32%;
        &:nth-child(n+4){
          margin-top: 20px;
        }
      }
    }

    &__btn {
      @each $class, $color in $map {
        &.is-#{$class}{ // ★
      @include btn(map-get($map, $class));
        }
      }
    }
  }
}

여기를 해시로 쓰는 이유.

&.is-#{$class}
Sass는 #를 보완하기위한 구문으로 #{}을 제공합니다.
변수에 들어간 캐릭터 라인은 통상은 값으로서 인식되어 에러가 나오기 때문에, 그대로라면 프로퍼티의 값 밖에 사용할 수 없습니다만, 샤프 기호를 앞에 둔 파괄호 #{}와 조합하는 것으로 셀렉터 또는 속성 이름에도 사용할 수 있습니다.
map-get(); $map 중에서 $key 에 대응한 값을 취득한다.

map 조작 함수에 대한 자세한 내용은
Sass의 map 작업을 방해하는 + 유용한 함수를 몇 가지

참고

Sass를 사용하는 메리트와 자주 사용하는 기능을 5개만 엄선!