Revision history [back]

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.