Блог

Скажем, у меня должен быть следующий CSS:

 div { }
div:hover {}
div:active {}
 

Есть ли способ создать @mixin , чтобы я мог использовать

 @mixin myAmazingMixer() {
    // Div stuff
    :hover { // Hover stuff }
    :active { // active stuff }
}

div {
   @include myAmazingMixer
}
 

Абсолютно! Единственное, чего вам, вероятно, не хватает, это amp; селектор (который ссылается на родительский селектор)

 @mixin myAmazingMixer() {
    // Div stuff
    amp;:hover { // Hover stuff }
    amp;:active { // active stuff }
}

div {
   @include myAmazingMixer
}
 

Без amp; этого ваш :hover будет применен ко всем дочерним элементам div .

Создайте микс, подобный: @mixin highlight{color: white;}, а затем, если вообще какому-либо другому элементу необходимо присвоить белый цвет, вы можете просто добавить этот микс в этот конкретный класс, указав @include highlight

Да, вы можете это сделать. Вы можете создать mixin (правило css) и включить его.