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

Question

I am developing an embeddable widget that needs to have all its CSS properties declared as important to prevent CSS bleed of the embedding page. This means that if I want to use some pre-existing CSS framework (like Bootstrap), or some jQuery plugin that uses a CSS stylesheet, I have to manually copy-paste the CSS in my assets folder and add !important declarations to each property. This seems a rather unmaintainable and error prone process.

As per title, is there a way to extend the SASS preprocessor to add !important to any declared property for an imported file or partial?

Answer 1

No, Sass doesn't have that functionality, because it is the most uncommon thing you would want to do in Sass, or CSS, or anywhere for that matter.

However, from what I understand, you want to add in the !important to all the CSS properties in a particular file. In that case, you can just simply do a Search & Replace: Search for ; and replace with !important;

Answer 2

The most obvious solution is to create a new mixin, potentially with the word important appended like so:

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

And then in your code:

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