Create new Twitter Bootstrap buttons with Bootstrap-Sass in Rails?

Question

I'm trying to create new Twitter Bootstrap buttons in my Rails app so I don't have to override the old ones. Using the Bootstrap-Sass gem, I've figured out how to override the default buttons like so (to make the btn-warning class 'Twitter blue'):

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

I'd like to define a btn-twitter class, among others, but I can't seem to figure out how to copy all the Bootstrap styles into new buttons. I've tried things like:

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

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

But that just makes a button with the default style.

I'm still fairly new to SASS and don't know much about the magic that's happening behind the scenes with the LESS -> SASS conversion. Also haven't been able to find anything on the 'net about creating new buttons. If there's something out there, feel free to just point me to it :)

Thanks in advance!

EDIT While not perfectly related to the question, I figured I'd provide a super-handy link to the Bootstrap-Sass variable sheet which has helped me quite a bit with extending Bootstrap in my Rails project: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/templates/project/_variables.scss.

Grainfield

possible duplicate of Is it possible in SASS to inherit from a class in another file? – Trier

Answer 1

It's very possible you can achieve this using 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
}

Blockbuster

Thanks Ben, I'll look into it. Not having much luck so far, but I'll keep trying. Anytime I overwrite the background or background-color, it still keeps the green btn-primary style. – Grainfield

Have you tried the !important flag? background: $colorName !important. – Blockbuster

That got me to changing the background color and the :hover background color, now I just need to figure out how to make it fade between the two like all the other Bootstrap buttons do. – Grainfield

Answer 2

In Bootstrap 3.1, the default button looks like this:

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

You can use it the same way in your code, but note that this only works after the bootstrap import (unlike variable overrides, which must come first).

Reservist

Answer 3

You can use the button-variant mixin that is already included in bootstrap-sass: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

For example:

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

Additionally you can find other useful mixins like the ones listed in this article: https://www.sitepoint.com/5-useful-sass-mixins-bootstrap/

Miniskirt

Answer 4

Have a look at mixin file _mixins.scss

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

New custom Buttons are easy to create:

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

Bonnes