Путь к иконке в Compass Sprite без использования волшебных селекторов

Question

Это, в частности, ссылка на среду спрайтов Compass

Следуя документации здесь http://compass -style.org / help / tutorials / spriting / # magic-selectors

Я использовал этот метод таким образом:

• селекторы / ten-by-ten.png
• селекторы / ten-by-ten_hover.png

.edit {
     @include selectors-sprite(ten-by-ten);
}

генерирует:

.selectors-sprite, .edit {
   background: url('/selectors-sedfef809e2.png') no-repeat;
}
.edit {
   background-position: 0 0;
}
.edit:hover, .edit.ten-by-ten_hover, .edit.ten-by-ten-hover {
   background-position: 0 -20px;
}

, что действительно здорово.Тем не менее, мне было интересно, если / как в другом случае я мог бы включить изображение «десять на десять.png» из спрайта, не включая магически присоединенное состояние наведения?

т.е.

Iхотите это:

.view {
     background: url('selectors/ten-by-ten.png') no-repeat;
}

Где при наведении курсора на этот значок не возникает состояние: hover (ten-by-ten_hover.png).

Но мне было интересно, есть ли способдостигнуть этого, продолжая ссылаться на изображение в спрайте?

Спасибо за любую помощь / совет.

Answer 1

Вы можете добавить спрайты непосредственно к элементу, используя директиву @extend.Синтаксис: @extend .folder prefix - имя спрайта - состояние (т.е. .selectors-sprite-name_hover):

.view {
  @extend .selectors-ten-by-ten
}

  &:hover {
    @extend .selectors-ten-by-ten_hover
  }

  &:active {
    @extend .selectors-ten-by-ten_active
  }

Answer 2

.selectors-ten-by-ten_hover, .selectors-ten-by-ten_active и т. Д. Вернули мне класс не найденные ошибки в Compass.

Это сработало, однако:

.viewHover{@extend .selectors-десять на десять: hover;}

.viewActive {@extend .selectors-десять-на-десять: активный;}