Question

我需要覆盖outline：none;使用SASS版本的bootstrap 3.3.2。我确实看到在bootstrap中定义了以下mixin

@mixin tab-focus() {
  // Default
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

在_button.scss中用于.btn，如下面的摘录

&:active,
  &.active {
    &:focus,
    &.focus {
      @include tab-focus;
    }
  }

但我不知道突出显示的大纲。我不想要。另外我不想改变bootstrap的源代码。因此我添加了custom_mixins.scss文件，并在下面定义了

@mixin tab-focus() {
  // Default
  outline: none;
}

并按照以下顺序从sass源代码编译bootstrap。然而它没有采取我定义的mixins。我该怎么做？

@import "bootstrap-sass-3.3.2/assets/stylesheets/_bootstrap";
@import "custom-mixins";
@import "custom-varaibles";
@import "html-controls";

Answer 1

据我了解你应该使用：

 @import "bootstrap-sass-3.3.2/assets/stylesheets/_bootstrap";

.btn {
  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      @include tab-focus;
      outline: none;
    }
  }
}

以上输出：

.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
  outline: none; }

与Less相反，sass不会将具有相同名称的两个mixin编译到CSS代码中。已使用最后定义的mixin，但仅在使用前定义。也不适用延迟加载。在考虑以下示例时，您可以看到前面的效果：

@mixin color() {
  size: 70px;
  color: red;
}

@mixin color() {
  color: green;
}

p {
@include color;
}

输出：

p {
   color: green; }

，但以下代码：

@mixin color() {
  size: 70px;
  color: red;
}


p {
@include color;
}


@mixin color() {
  color: green;
}

输出：

p {
  size: 70px;
  color: red; }

自定义bootstrap sass版本以使用outline：none;

1 个答案: