SASS provides a built-in function called "selector-extend" that can be used to add a prefix to all CSS selectors. Here's an example:
$prefix: ".my-prefix";
// Define a base selector
.my-selector {
color: red;
}
// Extend the base selector with the prefix
#{$prefix}#{selector-nest(".my-selector", "&")} {
@extend .my-selector;
}
This will compile to:
.my-selector, .my-prefix .my-selector {
color: red;
}
The #{$prefix}
interpolation is used to insert the prefix into the selector. The selector-nest
function is used to concatenate the prefix with the base selector. Finally, the @extend
directive is used to apply the styles from the .my-selector
selector to the prefixed selector.
Asked: 2021-12-13 11:00:00 +0000
Seen: 21 times
Last updated: Dec 08 '21