Skip to content

Instantly share code, notes, and snippets.

@napotopia
Last active June 10, 2021 19:43
Show Gist options
  • Save napotopia/c66dd0d30f6ba740c14e52470b33bcc4 to your computer and use it in GitHub Desktop.
Save napotopia/c66dd0d30f6ba740c14e52470b33bcc4 to your computer and use it in GitHub Desktop.
Add a wrapping class with the desired level of specificity
@mixin class-wrapper($wrapper, $specificity: 10) {
@if ($wrapper == null) {
@warn "$wrapper value is required.";
}
$iterator: $specificity / 10;
$selector: null;
@for $i from 0 to $iterator {
$selector: $selector + $wrapper;
}
#{$selector} {
@content;
}
}
@mixin prism-sandbox-wrapper() {
@include class-wrapper('.prism-sandbox', 20) {
@content;
};
}
// Example
@include prism-sandbox-wrapper {
.btn {
background-color: gold;
}
}
.prism-sandbox.prism-sandbox .btn {
background-color: gold;
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment