Ampersand не работает в: раньше в SASS

Я строю кнопки spritesheet, что-то вроде этого:Ampersand не работает в: раньше в SASS

<a class="Button one"></a> 
<a class="Button two"></a>

Со стилем:

a { 
    // Add basic background and styling 
    background: transparent url("images/background_image.png") no-repeat; 

    // Add icon on top 
    &:before {   
     content: ''; 
     display: block; 

     //.... 
     background: transparent url("images/icons.png") no-repeat; 

     // (1) 
     &.one { @include tile(165px, 0, 0) } 
     &.two { @include tile(165px, 1, 0) } 
    } 

    // (2) 
    &.one:before { @include tile(165px, 0, 0) } 
    &.two:before { @include tile(165px, 1, 0) } 
}

Теперь я хочу, чтобы добавить стили вариант, но (1) не работает, только (2). Нет ли способа избежать повторения :before?

источник

2015-06-11 MightyPork

Пробовал ли вы скомпилировать CSS? Он проверяет (не действительно, проверьте «Valid CSS information»)? – cimmanon

Конечно, он производит мусор с '(1)', поэтому я спрашиваю, как это сделать лучше. Нет необходимости в downvote – MightyPork

@cimmanon, как бы вы описали, что мое свойство не применяется к моему элементу? Это определение «не работает» в моем словаре – MightyPork

Если вы посмотрите на скомпилированный CSS, вы получите что-то вроде этого:

a:before.one { /* ... */ }

CSS псевдо-элементы, такие как :before и :after не могут иметь классы. Если вы хотите, чтобы сделать его короче, один из вариантов было бы объединить классы:

a { 
    &.one, &.two { 
     &:before { @include tile(165px, 0, 0) } 
    } 
}

Но так как вы хотите использовать различные значения для Mixin, я думаю, # 2 является самым чистым способом пойти.

источник

2015-06-11 21:24:24 SeinopSys

Ampersand не работает в: раньше в SASS

ответ

Смежные вопросы