Geek asks and answers

Is there a way to extend the SASS preprocessor to arbitrarily manipulate each declared property?

I am developing an embeddable widget that should have all of its CSS properties declared as important in order to prevent CSS from being reset on the embed page. This means that if I want to use some pre-existing CSS frameworks (e.g. Bootstrap) or some jQuery plugins that use the CSS stylesheet, I need to manually copy-paste CSS into the folder with my assets and add ads !importantto each property. This seems like a pretty impenetrable and error prone process.

According to the header, is there a way to extend the SASS preprocessor to add !importantto any declared property for the imported file or partial?

+3
source share
2 answers

No, Sass doesn't have that kind of functionality, because it's the most unusual thing you would like to do in Sass, or CSS, or anywhere else for that matter.

However, from what I understand, you want to add in !importantto all the CSS properties in a particular file. In this case, you can simply search and replace: Find ;and replace with!important;

+1
source

The most obvious solution is to create a new mixin, possibly with the addition of a word importantas follows:

%margin-none-important {
    margin: 0 !important;
}

And then in your code:

.no-margin {
    @extend %margin-none-important;
}
0
source

More articles:


All Articles