이미지대체기법 + SASS @each문 활용

_ir+each.scss

// 이미지 대체기법
// http://nicolasgallagher.com/another-css-image-replacement-technique/
// https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757c9e03dda4e463fb0d4db5a5f82d7
%ir {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
}

// SASS 리스트(Lists) 데이터 타입 선언
// 소셜 아이콘 이름을 담은 리스트를 담을 변수 $icons
$icons: (twitter, facebook, youtube, rss);

// SASS @each 문을 사용해 $icons 내부를 순환하여
// 클래스 선언 (문자 보간법 및 플레이스홀더 선택자 활용)
@each $icon in $icons {
    .#{$icon} {
        @extend %ir;
        background: url("../images/icons/#{$icon}.png") no-repeat;
    }
}