Skip to content

Instantly share code, notes, and snippets.

@martinherweg
Created March 18, 2022 12:07
Show Gist options
  • Save martinherweg/12368293a91f0a22226a985a0cf830ab to your computer and use it in GitHub Desktop.
Save martinherweg/12368293a91f0a22226a985a0cf830ab to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@use 'sass:map';
$themes: ['default', 'yellow', 'purple-yellow', 'gold', 'midnight-blue', 'purple-blue'];
$themeIcons: ();
@each $theme in $themes {
$index: index($themes, $theme);
$themeIcons: map.set($themeIcons, $theme, 'theme#{$index}')
}
.blabla__image {
@each $theme, $iconName in $themeIcons {
.t-color--#{$theme} & {
background-image: url('~ASSETS/svg/single/dot-ring-#{$iconName}.svg');
}
}
}
.t-color--default .blabla__image {
background-image: url("~ASSETS/svg/single/dot-ring-theme1.svg");
}
.t-color--yellow .blabla__image {
background-image: url("~ASSETS/svg/single/dot-ring-theme2.svg");
}
.t-color--purple-yellow .blabla__image {
background-image: url("~ASSETS/svg/single/dot-ring-theme3.svg");
}
.t-color--gold .blabla__image {
background-image: url("~ASSETS/svg/single/dot-ring-theme4.svg");
}
.t-color--midnight-blue .blabla__image {
background-image: url("~ASSETS/svg/single/dot-ring-theme5.svg");
}
.t-color--purple-blue .blabla__image {
background-image: url("~ASSETS/svg/single/dot-ring-theme6.svg");
}
{
"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