Crea nuovi pulsanti Bootstrap di Twitter con Bootstrap-Sass in Rails?

Question

Sto provando a creare nuovi pulsanti di Bootstrap di Twitter nella mia app Rails, quindi non devo sovrascrivere quelli vecchi. Utilizzando il Bootstrap-Sass gemma, ho capito come ignorare i pulsanti predefiniti in questo modo (per rendere la classe btn-warning 'Twitter blu'):

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

mi piacerebbe definire una classe btn-twitter, tra altri, ma non riesco a capire come copiare tutti gli stili Bootstrap in nuovi pulsanti. Ho provato cose del tipo:

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

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

Ma questo rende solo un pulsante con lo stile predefinito.

Sono ancora abbastanza nuovo per SASS e non sanno molto della magia che sta succedendo dietro le quinte con i meno -> conversione SASS. Inoltre non sono stato in grado di trovare nulla sulla 'rete sulla creazione di nuovi pulsanti. Se c'è qualcosa là fuori, sentitevi liberi di puntare solo ad esso :)

Grazie in anticipo!

EDIT Mentre non perfettamente legato alla domanda, ho pensato di fornire un collegamento super-utile per il foglio di variabili Bootstrap-Sass, che mi ha aiutato un po 'con l'estensione Bootstrap nel mio progetto Rails: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/templates/project/_variables.scss.

Answer 1

E 'molto probabile che si può raggiungere questo obiettivo usando Sass di @extend functionality.

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

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

Answer 2

Dai un'occhiata alla lima mixin _mixins.scss

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

nuovi pulsanti personalizzati sono facili da creare:

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

Answer 3

In Bootstrap 3.1, il pulsante di default si presenta così:

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

Puoi usarlo allo stesso modo nel tuo codice, ma nota che funziona solo dopo l'importazione bootstrap (a differenza delle sostituzioni delle variabili, che devono venire prima).

Answer 4

È possibile utilizzare il button-variant intermedia che è già incluso nel bootstrap-sass: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Ad esempio:

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

Inoltre è possibile trovare altri mixin utili come quelli elencati in questo articolo: https://www.sitepoint.com/5-useful-sass-mixins-bootstrap/