Question

我正在尝试在我的Rails应用程序中创建新的Twitter Bootstrap按钮，所以我不必覆盖旧的。使用Bootstrap-Sass gem，我已经找到了如何覆盖默认按钮的方法（使btn-warning类'Twitter蓝色'）：

$twitterBlue:#4099FF;
$btnWarningBackground: $twitterBlue; // (twitter blue)
$btnWarningBackgroundHighlight:     $twitterBlue;

我想定义一个btn-twitter类，但我似乎无法弄清楚如何将所有Bootstrap样式复制到新按钮中。我尝试过这样的事情：

$twitterColor: #4099FF;             // (twitter blue)
$btnTwitterBackground:              lighten($twitterColor, 15%);
$btnTwitterBackgroundHighlight:     $twitterColor;

.btn-twitter {
   background: $twitterBlue;
   // something goes here to inherit the base button styles
}

但这只是制作了一个默认样式的按钮。

我还是SASS的新手还不太了解LESS幕后发生的魔法 - ＆gt; SASS转换。还没有找到关于创建新按钮的网络上的任何内容。如果那里有什么东西，请随意指出我：）

提前致谢！

编辑虽然与这个问题没有完全相关，但我想我会提供一个超级方便的Bootstrap-Sass变量表链接，这对我在Rails中扩展Bootstrap有很大的帮助。项目：https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/templates/project/_variables.scss。

Answer 1

在Bootstrap 3.1中，默认按钮如下所示：

.btn-default {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}

您可以在代码中以相同的方式使用它，但请注意，这仅在引导程序导入后有效（与变量覆盖不同，必须先出现）。

Answer 2

你很有可能使用Sass的@extend functionality来实现这一点。

.btn-success {
  // some crazy unknown bootstrap stuff here
}

// in your file
.btn-twitter {
  @extend .btn-success;
  background-color: $twitterBlue;
  // more stuff
}

Answer 3

查看mixin文件_mixins.scss

// Button backgrounds
// ------------------
@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25))
...

新的自定义按钮很容易创建：

.mybutton{
    @extend .btn;
    @include buttonBackground($startColor:$bluelight,$endColor:$bluenormal);
}

Answer 4

您可以使用button-variant中已包含的bootstrap-sass mixin：https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

例如：

.btn-secondary {
  @include button-variant(white, #F9622F, #d75124);
}

此外，您还可以找到其他有用的mixin，例如本文中列出的那些：https://www.sitepoint.com/5-useful-sass-mixins-bootstrap/

使用Rails中的Bootstrap-Sass创建新的Twitter Bootstrap按钮？

4 个答案: