更改 Bootstrap SASS 边界半径（和其他混合） - Rails答案

【问题标题】：Change Bootstrap SASS border-radius (and other mixins) - Rails更改 Bootstrap SASS 边界半径（和其他混合） - Rails
【发布时间】：2012-04-23 09:35:40
【问题描述】：

我正在使用 rails gem Bootstrap SASS，并且想知道如何覆盖一些 mixin。具体是边界半径等。

我想我可以像这样简单地覆盖它：

@import "bootstrap";
@import "bootstrap-responsive";

    @mixin border-radius($radius: 1px) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
              border-radius: $radius;
    }

但这似乎不适合深蹲！有什么想法吗？

Bootstrap SASS - Mixins

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap sass

【解决方案1】：

这实际上是一个带参数的 mixin，SASS 称它为“mixin”，但它实际上是一个参数或动态 mixin。但是为了澄清您的问题，您是想更改 default 的边界半径 mixin radius 值，还是想逐个班级动态地进行更改？如果您希望更改默认值，您应该直接在 Bootstrap mixin.scss 文件中进行。

但是，如果您想要后者，您只需将 mixin 添加到任何类中，就像添加诸如 font-size 之类的属性一样，但是您需要在每次使用 mixin 时传入您希望声明的值。像这样：

.giant-box {  
   width: 400px;
   height: 400px;
   background-color: #900;
   @include border-radius(20px);  
}

.small-box {  
   width: 10px;
   height: 10px;
   background-color: #900;
   @include border-radius(3px);  
}

在 LESS 中它看起来像这样：

.giant-box {  
   width: 400px;
   height: 400px;
   background-color: #900;
   .border-radius(20px);  
}

【讨论】：

我想知道是否可以更改默认值。我无法直接访问用于引导的 mixin 文件（我正在使用将其插入中间件的 gem），但似乎我应该手动将其包含在资产中。感谢您的帮助，这清除了它！
我得到“未定义的 mixin 'border-radius'”（rails bootstrap-sass gem）

【解决方案2】：

如果你想覆盖 Bootstrap 变量，你需要在导入之前这样做。例如

$baseFontFamily: $serifFontFamily; // Use serif fonts instead of sans-serifs
@import "bootstrap";
@import "bootstrap-responsive";

【讨论】：

【解决方案3】：

查看 Bootstrap 站点上的 Customize and Download 页面。页面上列出了 LESS 变量列表。

通常 SASS 变量是相同的，但使用 '$' 而不是 '@'。要自定义引导程序而无需在更改一两个变量后重新下载所有内容，您可以在 .scss 文件中执行此操作：

$border-radius-base: 0;
@import "bootstrap";

【讨论】：

【解决方案4】：

这对游戏来说特别晚，但在 Bootstrap 4 中，您可以像这样覆盖 enable-rounded Sass 变量：

@enable-rounded    false;
@import "~bootstrap/scss/bootstrap" /*lots of ways to do this step, see other answers herein*/

Bootstrap Sass Options Documentation

【讨论】：