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!
bingo source
share