나침반 스프 라이트가 너무 많은 CSS 클래스를 생성합니다.

Question

스프라이트 이미지를 생성하는 데 나침반을 사용하고 있습니다. 그리고 나는 많은 스프라이트 아이콘을 가지고 있으며 너무 많은 CSS 코드를 생성하고 있습니다 (배경 이미지에 대한 클래스 선택기가 너무 많음). 내가 원하는 <div class="my-icons-sprite my-icons-delete"></div>

: 당신은 내가 이런 식으로 사용을 참조하면

.my-icons-sprite, 
.my-icons-delete, 
.my-icons-edit, 
.my-icons-new, 
.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } 

.my-icons-delete { background-position: 0 0; } 
.my-icons-edit { background-position: 0 -32px; } 
.my-icons-new { background-position: 0 -64px; } 
.my-icons-save { background-position: 0 -96px; } 

: 당신이 http://compass-style.org/help/tutorials/spriting/

@import "my-icons/*.png"; 
@include all-my-icons-sprites; 

생성 것인가 여기에 볼 수

: 그래서 나침반 스프라이트 코드를 분석 할 수 있습니다 이 코드를 생성하는 나침반 :

.my-icons-sprite { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } 

.my-icons-delete { background-position: 0 0; } 
.my-icons-edit { background-position: 0 -32px; } 
.my-icons-new { background-position: 0 -64px; } 
.my-icons-save { background-position: 0 -96px; } 

새로운 이미지가 없으면 배경 및 배경 위치가 추가됩니다. 선택기가 너무 많습니다.

구성이 있습니까?

감사

제 생각에는

Answer 1

Compass에 대해이 스 니펫을 사용해 보셨습니까?

$icons: sprite-map("icons/*.png"); 

i{ 
    background: $icons; 
    display: inline-block; // or block 
} 

@each $i in sprite_names($icons){ 
    .icn-#{$i}{ 
     background-position: sprite-position($icons, $i); 
     @include sprite-dimensions($icons, $i); 
    } 
} 

이 예에서는 아이콘 폴더에 별도의 .PNG - 파일의 파일 이름과 함께 접두사 icn-를 포함하는 클래스로 <i></i> -tag를 사용합니다. 이처럼 :

<i class="icn-delete"></i> 

생성 된 CSS는 다음과 같습니다

i { 
    background: url('/path/to/generated/spritemap/my-icons-xxxxxxxxxxx.png'); 
    display: inline-block; 
} 
.icn-delete { 
    background-position: 0 0; 
    height: 32px; // assuming the width is 32px 
    width: 32px; // assuming the height is 32px 
} 
.icn-edit{ 
    background-position: 0 -32px; 
    height: 32px; // assuming the width is 32px 
    width: 32px; // assuming the height is 32px 
} 
.icn-new { 
    background-position: 0 -64px; 
    height: 32px; // assuming the width is 32px 
    width: 32px; // assuming the height is 32px 
} 
... 
.. 
. 

아직도, 나는 꽤 Compass' Magic Selectors와 함께이를 사용하는 방법을 알아 냈하지 않았습니다.

매직 셀렉터는 다른 상태 (: 호버, : 활성, : 목표)가 필요할 때 매우 효과적입니다. 파일 이름을 filename_state.png (delete_hover.png, delete_active.png 등)로 지정하면됩니다. Compass 'Magic Selectors는 hover, : active 및 : target (delete : hover, delete_hover 및 delete-hover)에 대한 CSS를 자동으로 생성합니다. 이렇게하면 국가 변경을 어떻게 대변하는지 자유롭게 선택할 수 있습니다.

당신, 내 첫 번째 예에서, 호버/활성 상태의 접미사와 파일 이름을 가지고, 스 니펫은 CSS는 다음과 같이 기록한다 :

.icn-edit_hover { 
    background-position: -32px -32px; 
    height: 32px; 
    width: 32px; 
} 

내가 정말이 인쇄 가지고 싶습니다

.icn-edit:hover, .icn-edit_hover, .icn-edit-hover{ 
    background-position: 0 -32px; 
    height: 32px; 
    width: 32px; 
} 

전통적인 Compass' Magic Selectors과 같습니다. 어떤 생각?

Answer 2

, (이미지에 대한 속성 선택 사용)이 코드를 가지고하는 것 두 세계 (적은 HTML 및 CSS)의 가장 좋은 것 같다 :

HTML을

<div class="my-icons-delete"></div> 

CSS

[class^="my-icons-"] { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } 

.my-icons-delete { background-position: 0 0; } 
.my-icons-edit { background-position: 0 -32px; } 
.my-icons-new { background-position: 0 -64px; } 
.my-icons-save { background-position: 0 -96px; } 

불행히도 컴파스를 수출하는 방법을 모르겠습니다. 그러나 백엔드 정적 CSS를 빌드하는 대신 Compass를 동적으로 사용하지 않는 한, 생성 된 일단 변경하면됩니다.

Answer 3

현재 출력에 어떤 문제가 있습니까? 당신은 이미 my-icons-delete/edit/new/save 만 할당 할 수 있습니다. 이것은 의미 론적으로 충분합니다. 이미 아이콘이라고 말하고 삭제 아이콘입니다.

Answer 4

ScottS 질문에 대한 답변을 찾는 모든 사용자에게. 내가없는 baseclass

로 시작 아무것도에 대한 CSS 선택기를 사용하는 방법 이 시도 : http://codepen.io/Acts7/pen/nwsEb

나는 아래의 코드를 붙여 넣기하고있다.

이

spriteGen 믹스 인은 두 개의 매개 변수 1) 스콧의 경우 (사용하려는없는 baseclass를 요구 --- "myicons" 2) 두 번째 매개 변수는

는 또한 잊지 DONT 폴더 위치입니다 "." # {$ mySpriteBaseClass} 전. 그렇지 않으면 당신이 얻을 >> myicons-home_icon {배경 위치 : ...} (. 어떤 알 클래스 이름 선택에 대한)이 내가 현재하고 있어요 무엇

는

// _custom.scss 
// --------------------------------------------------------- 
// Sprite Generation 
    --------------------- */ 
    @include spriteGen('sprites','sprites'); 

// _mixins.scss 
// --------------------------------------------------------- 
// Sprite Generation Mixin with options 
@mixin spriteGen($mySpriteBaseClass:'.spritebc',$mySpriteFolder:'sprites'){ 
    $mySprites:$mySpriteFolder + "/*.png"; 
    $spritefoldername-map: sprite-map($mySprites, 
     $spacing: 10px, 
     $layout: vertical 
    ); 
    // if using base class as starter for sprite name class 
    [class^="#{$mySpriteBaseClass}"]{ 
    /*// if using a separate base class 
    .#{$mySpriteBaseClass}{*/ 
     //  TODO: 
     //  Add if/else to set width globally 
     //  or let spriting assign it per each 
     //width: 48px; 
     //height: 48px; 
     display: inline-block; 
     vertical-align: middle; 
     background: $spritefoldername-map no-repeat; 
    } 

    @each $sprite in sprite_names($spritefoldername-map) { 
     // if using sprite base class as prefix to full sprite class name 
     .#{$mySpriteBaseClass}-#{$sprite} { 
     /*// if using separate base class and sprite name class 
     .#{$sprite} {*/ 
      background-position: sprite-position($spritefoldername-map, $sprite); 
      @include sprite-dimensions($spritefoldername-map, $sprite); 
     } 
    } 
} 

Answer 5

, 그래도 말대꾸 3.3이 필요합니다

$icons: sprite-map('icons/*.png'); 

.icon { 
    background: $icons; 
    display: inline-block; 
    vertical-align: middle; 
} 

@each $i in sprite_names($icons) { 

    $underscore: str-index($i, _); 

    @if ($underscore < 1) { 
     .icon--#{$i} { 
      background-position: sprite-position($icons, $i); 
      @include sprite-dimensions($icons, $i); 
     } 
    } @else { 
     $prefix: str-slice($i, 0, $underscore - 1); 
     $postfix: str-slice($i, $underscore + 1); 

     .icon--#{$prefix}:#{$postfix} { 
      background-position: sprite-position($icons, $i); 
     } 
    } 

} 

당신은 "star.png"와 "star_hover.png"이미지가있을 경우 경우가 .icon--star 및 .icon--star:hover 클래스를 생성 할 수 있습니다 있도록, <i class="icon icon--star></i>처럼 이것을 사용할 것이다 가정, 그래서 내가 여기 BEM을 사용하고 있습니다 이름.