Twitter bootstrap 在Rails中使用引导Sass创建新的Twitter引导按钮?
我正在尝试在我的Rails应用程序中创建新的Twitter引导按钮,这样我就不必覆盖旧的按钮。使用Twitter bootstrap 在Rails中使用引导Sass创建新的Twitter引导按钮?,twitter-bootstrap,sass,twitter-bootstrap-rails,bootstrap-sass,Twitter Bootstrap,Sass,Twitter Bootstrap Rails,Bootstrap Sass,我正在尝试在我的Rails应用程序中创建新的Twitter引导按钮,这样我就不必覆盖旧的按钮。使用Bootstrap Sassgem,我找到了如何覆盖默认按钮的方法(使btn警告类“Twitter blue”): 我想定义一个btntwitter类,但我似乎不知道如何将所有引导样式复制到新按钮中。我试过这样的方法: $twitterColor: #4099FF; // (twitter blue) $btnTwitterBackground: l
Bootstrap Sass
gem,我找到了如何覆盖默认按钮的方法(使btn警告类“Twitter blue”):
我想定义一个btntwitter
类,但我似乎不知道如何将所有引导样式复制到新按钮中。我试过这样的方法:
$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有很大帮助:。使用Sass的
查看mixin文件
\u 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);
}
在Bootstrap 3.1中,默认按钮如下所示:
.btn-default {
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
您可以在代码中以相同的方式使用它,但请注意,这仅在引导导入之后才起作用(与变量重写不同,变量重写必须首先出现)。您可以使用已包含在
引导sass中的按钮变量
混合:
例如:
.btn-secondary {
@include button-variant(white, #F9622F, #d75124);
}
此外,您还可以找到其他有用的mixin,如本文中列出的mixin:谢谢Ben,我会研究一下。目前运气不太好,但我会继续努力。每当我覆盖背景
或背景色
时,它仍然保持绿色btn主
样式。您尝试过吗!重要
标志<代码>背景:$colorName!重要信息
。这让我改变了背景色和:hover背景色,现在我只需要弄清楚如何使它像所有其他引导按钮一样在这两种颜色之间淡出。可能的重复
.btn-default {
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-secondary {
@include button-variant(white, #F9622F, #d75124);
}