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!

回答1:

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.

回答2:

One potential implementation I'm exploring uses custom importers in ruby-sass or the experimental importers feature in node-sass (2.0+) to apply a sed (find and replace) transform to the Bootstrap Sass files, replacing leading class definitions with % syntax. I haven't gotten much past experimentation, though, and I don't know what I might break without a comprehensive visual test suite. Happy to have some help with it.