自定义bootstrapsass版本使用outline:none；

Question

我需要覆盖大纲：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;
    }
  }

但我不知道突出显示的轮廓。我想要none。我也不想更改 bootstrap 的源代码。因此我添加了 custom_mixins.scss 文件并在下面定义了

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

并使用以下命令从 sass 源代码编译 bootstrap。但是它没有采用我定义的混合。我该怎么做？

@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 已被使用，但仅在使用前定义。 sass 也不应用延迟加载。在考虑以下示例时，您可以看到前面的效果：

@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; }

自定义bootstrapsass版本使用outline:none；

Customize bootstrap sass version to use outline:none;

twitter-bootstrap

bootstrap-sass