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

你可以扩展一个占位符类，类似于mixin，但输出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;
}

Answer 2

你可以使用这样的mixin：

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

并像这样使用它：

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

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

但对于两次使用过的2个属性，我不会为此烦恼而只是留下它现在的方式。

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

2 个答案: