Блог

Мне нужно перезаписать некоторые правила начальной загрузки с помощью SASS:

 .open>.btn-default.dropdown-toggle{
    background-color: transparent;
    color: red;

    amp;:focus, amp;:hover{
      background-color: transparent;
      color: red;
    }

    amp;:active:focus{
      outline: 0;
    }
}
  

Есть ли лучший способ написать это? Без повторения background-color и color ?

Вы могли бы расширить класс-заполнитель, аналогичный mixin, но выходной CSS более чистый. Это был бы рекомендуемый подход для небольших вещей. Класс-заполнитель начинается с % и не выводится в CSS как отдельный класс, но группирует все правила, которые его используют, чтобы он не повторялся.

 %red-transparent {
    background-color: transparent;
    color: red;
}
.open>.btn-default.dropdown-toggle{
    @extend %red-and-transparent;

    amp;:focus, amp;:hover{
        @extend %red-and-transparent;
    }
}
  

Результаты в этом css

 .open > .btn-default.dropdown-toggle, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle:hover {
  background-color: transparent;
  color: red;
}
  

Вы могли бы использовать микширование, подобное этому:

 @mixin red-and-transparent {
    background-color: transparent;
    color: red;
}
  

И используйте это так:

 .open>.btn-default.dropdown-toggle{
    @include red-and-transparent;

    amp;:focus, amp;:hover{
        @include red-and-transparent;
    }
}
  

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