스프라이트이미지 사스(반응형일때)

http://ofsilvers.hateblo.jp/entry/compass-sprite-mixins

백그라운드이미지 믹스인

http://stackoverflow.com/questions/5448044/sass-background-image-mixin

#1. 핸들러

@mixin icon ($imgpath) {
  display: inline-block;
  background-image: url($imgpath);
  background-repeat: no-repeat;
}
 
 
{{#sprites}}
@mixin {{name}}($device-pixel-ratio: 1) {
  background-position: ({{px.offset_x}}/$device-pixel-ratio) ({{px.offset_y}}/$device-pixel-ratio);
  width: ({{px.width}}/$device-pixel-ratio);
  height: ({{px.height}}/$device-pixel-ratio);
  background-size: ({{px.total_width}}/$device-pixel-ratio) auto;
}
{{/sprites}}

#2. 스프라이트 결과(_sprite.scss)

@mixin icon ($imgpath) {
  display: inline-block;
  background-image: url($imgpath);
  background-repeat: no-repeat;
}


@mixin icon_2($device-pixel-ratio: 1) {
  background-position: (0px/$device-pixel-ratio) (0px/$device-pixel-ratio);
  width: (33px/$device-pixel-ratio);
  height: (25px/$device-pixel-ratio);
  background-size: (1280px/$device-pixel-ratio) auto;
}
@mixin mm($device-pixel-ratio: 1) {
  background-position: (0px/$device-pixel-ratio) (-35px/$device-pixel-ratio);
  width: (50px/$device-pixel-ratio);
  height: (50px/$device-pixel-ratio);
  background-size: (1280px/$device-pixel-ratio) auto;
}
@mixin travel2($device-pixel-ratio: 1) {
  background-position: (0px/$device-pixel-ratio) (-95px/$device-pixel-ratio);
  width: (1280px/$device-pixel-ratio);
  height: (960px/$device-pixel-ratio);
  background-size: (1280px/$device-pixel-ratio) auto;
}

#3. scss 파일 에 적는 방법

.icon {
  @include icon ('../img/sprite/sprite.png')
}
.gnb .list .icon_2 {
  @include icon_2;
  padding:20px;

}
@media (min-width: 767px) {
  .gnb .list .icon_2 {
    @include icon_2(2);
    padding:20px;
  }
}

#4. css 컴파일 결과

.icon {
    display: inline-block;
    background-image: url("../img/sprite/sprite.png");
    background-repeat: no-repeat;
}

.gnb .list .icon_2 {
    background-position: 0px 0px;
    width: 33px;
    height: 25px;
    background-size: 1280px auto;
    padding: 20px;
}

@media (min-width: 767px) {
    .gnb .list .icon_2 {
        background-position: 0px 0px;
        width: 16.5px;
        height: 12.5px;
        background-size: 640px auto;
        padding: 20px;
    }
}