Düğme Rengini Değiştirmek İçin Önyükleme Serisini Kullanma

Question

Bir aylık raylar web sitesi yapmak için RoR kullanıyorum. Bu, styles.css.scss sayfasındaki koddur. Önyükleme kullanır. Neden olduğu konusunda emin değilim ama $ btnPrimaryBackground: yeşil metne rağmen düğme rengi değişmiyor. Düğme renginin neden değişmediği konusunda herhangi bir fikri veya fikri var mı? Teşekkürler.

$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

Eğer AZ ile Bootsrap kullanıyorsanız, sadece yapabilirsiniz:

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

sadece değiştirmek istediğiniz düğme sınıfı geçersiz kılmaz sonra ise rengi:

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

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

Ayrıca, göründüğü için düğme rengini yeşil olarak değiştirmek istediğinizde neden .btn-başarı sınıfını kullanmıyorsunuz ?:

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

Kaynak: Bootstrap 3 buttonBackground yılında Styling twitter bootstrap buttons

Answer 2

böyle button-variant(@color; @background; @border) kullanmak zorunda, artık çalışmaz:

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

Answer 3

Ayrıca kendi yapmak ve .btn-varsayılan devralabilir. SCSS'de şöyle:

.btn-custom {@extend .btn; @extend .btn-default; renk: # 6EA81A; }