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を使うメリットとよく使う機能を５つだけ厳選！