Kyle Carlson Kyle Carlson - 11 days ago 6
Sass (Sass) Question

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

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.

Answer

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
}
Comments