css - 编写这些 SASS 规则的更好方法

Question

我需要使用 SASS 覆盖一些 Bootstrap 规则:

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

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

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

有没有更好的写法？不重复 background-color 和 color?

Answer 1

您可以扩展占位符类，类似于混合，但输出 CSS 更清晰。对于较小的事物，这将是推荐的方法。占位符类以 % 开头，不会作为单个类在 CSS 中输出，而是将所有使用它的规则分组，这样就不会重复。

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

    &:focus, &: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;
}