Categories
css sass twitter-bootstrap

Using @extend-Only to abstract Bootstrap selectors

I have several styles that use Sass’ @extend or @include to inherit properties from selectors imported from Bootstrap scss files.

I would like to convert all of the Bootstrap selectors to @extend-Only placeholders, so I do not have to include any original Bootstrap selectors in my final .css output. The goal is to write my own css classes, extend from Bootstrap only where desired.

For example, I wish to have a navbar called .super-freaky-nav:

.super-freaky-nav{
@extend .navbar;
@extend .navbar-default;
@extend .navbar-top-fixed;
}

Ideally, my final .css output will not have a single reference to .navbar, .navbar-default, or .navbar-top-fixed.

Is there a way to do this without going into the _navbar.scss file and converting all of the selectors to @extend-Only classes (%navbar, %navbar-default, %navbar-top-fixed, etc)?
Thanks!

No. Sass does not have the ability to do what you’re asking for. There’s still a legitimate need to be able to extend normal classes and Sass has no way of differentiating between classes that should or shouldn’t be extended.