Skip to content

Instantly share code, notes, and snippets.

@ScopeyNZ
Created June 30, 2023 02:21
Show Gist options
  • Save ScopeyNZ/670928321fcae933962bdb5159713c68 to your computer and use it in GitHub Desktop.
Save ScopeyNZ/670928321fcae933962bdb5159713c68 to your computer and use it in GitHub Desktop.
@use "sass:string";
@use "sass:selector";
@mixin with-block-modifier($modifier) {
$selector: #{&};
$pseudo: string.index($selector, '::');
@if ($pseudo) {
$selector: string.slice($selector, 0, $pseudo - 1);
$pseudo: string.slice(#{&}, $pseudo);
}
$offset: string.index($selector, '__');
@if ($offset) {
@at-root #{string.slice($selector, 0, $offset - 1)}--#{$modifier} #{$selector}#{$pseudo} {
@content
}
} @else {
$offset: string.index($selector, '--');
@if ($offset) {
@at-root #{$selector}#{string.slice($selector, 0, string.index($selector, '--') - 1)}--#{$modifier}#{$pseudo} {
@content
}
} @else if ($pseudo) {
@at-root #{$selector}#{$selector}--#{$modifier}#{$pseudo} {
@content
}
}
}
}
.block {
&--modifier {
color: red;
@include with-block-modifier('bad') {
color: white;
}
&::after {
@include with-block-modifier('baz') {
color: orange;
}
}
}
&__element {
@include with-block-modifier('test') {
color: green;
}
&::after {
@include with-block-modifier('bar') {
color: teal;
}
}
&--modifier {
@include with-block-modifier('lol') {
color: black;
}
}
}
&::before {
color: pink;
@include with-block-modifier('foo') {
color: hotpink;
}
}
}
.block--modifier {
color: red;
}
.block--modifier.block--bad {
color: white;
}
.block--modifier.block--baz::after {
color: orange;
}
.block--test .block__element {
color: green;
}
.block--bar .block__element::after {
color: teal;
}
.block--lol .block__element--modifier {
color: black;
}
.block::before {
color: pink;
}
.block.block--foo::before {
color: hotpink;
}
{
"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