4

我正在使用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;
    }

但这似乎并不适合深蹲！有任何想法吗？

引导 SASS - 混合

4

4 回答 4

6

这实际上是一个带有参数的 mixin，SASS 称它为“mixin”，但它实际上是一个参数或动态的 mixin。但是为了澄清您的问题，您是要更改边界半径 mixin 半径的默认值，还是要逐个班级动态地进行更改？如果您希望更改默认值，您应该直接在 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);  
}
于 2012-04-12T07:49:28.793 回答
3

检查Bootstrap 站点上的自定义和下载页面。页面上列出了 LESS 变量列表。

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

$border-radius-base: 0;
@import "bootstrap";
于 2014-05-18T08:42:03.147 回答
1

如果要覆盖 Bootstrap 变量，则需要在导入之前进行。例如

$baseFontFamily: $serifFontFamily; // Use serif fonts instead of sans-serifs
@import "bootstrap";
@import "bootstrap-responsive";
于 2012-09-15T01:30:50.907 回答
0

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

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

引导 Sass 选项文档

于 2020-09-27T01:58:18.197 回答