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

Question

我正在尝试在我的Rails应用程序中创建新的Twitter Bootstrap按钮,所以我不必覆盖旧的.使用Bootstrap-Sassgem,我已经弄清楚如何覆盖默认按钮(如btn-warning类'Twitter blue'):

$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 - > 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功能实现这一目标.

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

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