Using @ extend-Only for Bootstrap abstract selectors only

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 Bootstrap selectors to @ extend-Only placeholders, so I don't need 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 necessary.

For example, I want to have a navigation bar called .super-freaky-nav:

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

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

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

+4
source share
2 answers

No. Sass has no way to do what you ask. There is still a legitimate need to extend ordinary classes, and Sass has no way to differentiate classes that should or should not be extended.

+2
source

, , ruby-sass importers node-sass (2.0+), sed ( ) Bootstrap Sass, %. , , , . .

+2

Source: https://habr.com/ru/post/1537963/


All Articles