나침반 스프라이트 내가 나침반을 사용하여 스프라이트 시트를 만든

Question

반응 이미지 :

11 아이콘입니다

$roundedicons-layout:smart; 
@import "roundedicons/*.png"; 
@include all-roundedicons-sprites; 

는 잘 작동합니다. 난 그냥 단순한와 함께 수업을 조정해야 할 때 나는 또한 부분이 있습니다

은 다음과 같습니다 모바일, 태블릿 및 데스크톱 @include respond-to(phone) { width: 100% ;} : 나는 현재 데 문제가

$break-desktop: 1024px; 
$break-tablet: 720px; 
$break-phone: 320px; 

@mixin respond-to($media) { 
    @if $media == phone { 
    @media only screen and (max-width: $break-phone) { @content; } 
    } 
    @else if $media == tablet { 
    @media only screen and (min-width: $break-phone + 1) and (max-width: $break-desktop - 1) { @content; } 
    } 
    @else if $media == desktop { 
    @media only screen and (min-width: $break-desktop) { @content; } 
    } 
} 

있다는 것을 3 각 기기 (데스크톱, 태블릿 및 모바일)의 아이콘 이미지 크기가 다릅니다. 또한 IE8을 지원해야하므로 배경 이미지를 확장 할 수 없습니다. 나는 클래스를 추가하고 제거하기 위해 많은 jquery를 사용하지 않고 이것을 수행하는 가장 좋은 방법이 무엇인지 궁금했다. 필자의 첫 번째 본능은 모든 장치에 대해 별도의 스프라이트 시트를 사용하는 것이었지만 jquery에서 클래스를 전환해야했습니다. 그럼 어쩌면 내가 모두 하나로 결합 할 수 있습니다,하지만 난 여전히 jquery를 사용해야합니다. 사용할 수있는 나침반에 더 좋은 방법이 있습니까?

난 그냥 말대꾸를 사용하여 반응 스프라이트이 솔루션을 함께했다

Answer 1

는,이 코드는 당신을 도울 수 있습니다.

@import "compass"; 

//generated sprite for every device 
$iconsSmall: sprite-map("icons/small/*.png"); 
$iconsMedium: sprite-map("icons/medium/*.png"); 
$iconsBig: sprite-map("icons/big/*.png"); 

//common class for all icons 
.icons{ 
    @include respond-to(phone){ 
    background: $iconsSmall; 
    } 

    @include respond-to(tablet){ 
    background: $iconsMedium; 
    } 

    @include respond-to(desktop){ 
    background: $iconsBig; 
    } 
} 

//for example icons name: close.png 
.icon-close{ 
    @include respond-to(phone){ 
    background-position: sprite-position($iconsSmall, close); 
    } 

    @include respond-to(tablet){ 
    background-position: sprite-position($iconsMedium, close); 
    } 

    @include respond-to(desktop){ 
    background-position: sprite-position($iconsBig, close); 
    } 
} 

Answer 2

감사 : 바로 이해한다면 https://gist.github.com/apauly/7917906