ブートストラップを使用してボタンの色を変更する

Question

私はRoRを使用して1か月間のウェブサイトを作成しています。これはstyles.css.scssシートのコードです。ブートストラップを利用しています。理由は分かりませんが、$ btnPrimaryBackground：緑色のテキストにもかかわらず、ボタンの色は変わりません。ボタンの色が変わらない理由は誰にもありますか？ありがとう。

$baseFontFamily: Oxygen; 
@import url(http://fonts.googleapis.com/css?family=Oxygen); 


$navbarBackgroundHighlight: white; 
$navbarBackground: white; 
$btnPrimaryBackground: green; 

@import 'bootstrap'; 
body{ 
    padding-top: 60px; 
} 

@import 'bootstrap-responsive'; 

.navbar-inner{ 
    @include box-shadow(none !important); 
    border: 0; 
} 

.footer{ 
    margin-top: 50px; 
    color: $grayLight; 
    a{ 
     color: $gray; 
    } 
} 

Answer 1

あなたがLESSでBootsrapを使用している場合、あなたは、単に行うことができます。

.btn-primary { 
    .buttonBackground(@yourColor, @yourColorDarker); //(button, hover) 
} 

、あなたは単にあなたが色を変更したいボタンクラス上書きされていない場合：

.btn-warning { background-color: Your color; } //button 

.btn-warning:hover { background-color: Your color; } //hover 

をさらに、ボタンの色を緑色に変更したいと思うので、なぜ.btn-successクラスを使用しないのですか？

<%= button_tag "Hello", :class => "btn btn-success" %> 

出典：buttonBackgroundはもう動作しないブートストラップ3ではStyling twitter bootstrap buttons

Answer 2

、あなたがこのようなbutton-variant(@color; @background; @border)を使用する必要があります。

.btn-custom { 
    .button-variant(@custom-color, @custom-color-bg, @custom-color-border); 
} 

Answer 3

また、独自の作りと.btn-デフォルトから継承することができます。このようなSCSSでは：

.btn-custom {@extend .btn; @extend .btn-default;色：＃6EA81A; }