Utwórz nowe przyciski Bootstrap dla Twittera za pomocą Bootstrap-Sass w Railsach?

Question

Próbuję utworzyć nowe przyciski Bootstrap dla Twittera w mojej aplikacji Rails, więc nie muszę przesłonić starych. Korzystanie z Bootstrap-Sass gem, mam zorientowali się, jak zastąpić domyślne przyciski jak tak (aby klasę „Twitter Blue” btn ostrzegania):

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

chciałbym zdefiniować klasę btn-twitter m.in. inni, ale nie mogę wymyślić, jak skopiować wszystkie style Bootstrap do nowych przycisków. Próbowałem takich rzeczy jak:

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

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

Ale to po prostu tworzy przycisk z domyślnym stylem.

Jestem wciąż całkiem nowy w SASS i nie wiem zbyt wiele na temat magii, która dzieje się za kulisami dzięki konwersji LESS -> SASS. Również nie udało się znaleźć niczego w Internecie na temat tworzenia nowych przycisków. Jeśli coś tam jest, możesz po prostu wskazać mi to :)

Z góry dziękuję!

EDIT Chociaż nie idealnie wiąże się z pytaniem, pomyślałem, że zapewniają super-poręczny link do zmiennej arkusza Bootstrap-Sass, która pomogła mi trochę z powiększenia Bootstrap w moim projekcie szyn: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/templates/project/_variables.scss.

Answer 1

To bardzo możliwe, że można to osiągnąć, używając Sass's @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

Zapraszamy do obejrzenia pliku wstawek _mixins.scss

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

Nowe niestandardowe przyciski są łatwe do tworzenia:

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

Answer 3

W Bootstrap 3.1, przycisk domyślny wygląda następująco:

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

Możesz użyć tego w kodzie tak samo, ale pamiętaj, że działa to tylko po imporcie bootstrap (w przeciwieństwie do nadpisań zmiennych, które muszą pojawić się jako pierwsze).

Answer 4

Można użyć button-variant wstawek, które są już zawarte w bootstrap-sass: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

na przykład:

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

Dodatkowo można znaleźć inne przydatne wstawek takich jak te wymienione w tym artykule: https://www.sitepoint.com/5-useful-sass-mixins-bootstrap/