自定义 bootstrap sass 版本以使用 outline:none;答案

【问题标题】：Customize bootstrap sass version to use outline:none;自定义 bootstrap sass 版本以使用 outline:none;
【发布时间】：2015-02-14 23:40:38
【问题描述】：

我需要覆盖大纲：无；使用 SASS 版本的 bootstrap 3.3.2。我确实看到在引导程序中定义了以下 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;
    }
  }

但我不知道突出显示的轮廓。我一个都不要。另外我不想更改引导程序的源代码。因此我添加了 custom_mixins.scss 文件并在下面定义

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

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

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

【问题讨论】：

标签： twitter-bootstrap bootstrap-sass

【解决方案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; }

【讨论】：