aggregation of selectors created by mixin possible? - sass

Question

I try to get a mixin "remebering" the selectors it was generating so I can make a bulk-selector at the end.
To illustrate what I am trying to do – My mixin looks like so:
#mixin fontcustom($name) {
#if $name == "heart" {
$glyph: '\2764'; // a special character in my own font -> ❤
}
#else if $name == "foo" { ... }
#else if $name == "bar" { ... }
#else if $name == "baz" { ... }
// ... much much more characters ...
&:before {
content:"#{$glyph}";
}
/* aggreagation of selectors ? */
}
#function selectorsUsingFontcustom() {
/* this should somehow result in a list of selectors, see above */
font-family: fontcustom;
color: red;
/* ... */
}
Obviously there are some more style declarations needed, for example font-family, colors and so on.
I want to avoid repetive declarations so my question is: is there a way to make the mixin "remember" the selectors which resulted in applying it and genarate a comma-separated list of them, which results in something like the following?
SCSS:
#my-fancy-selector [data-is-liked] {
#include fontcustom("heart");
}
.another>.fancy+.foo-selector {
#include fontcustom("foo");
}
.another>.fancy+.baz-selector {
#include fontcustom("baz");
}
/* no clue about the following: */
selectorsUsingFontcustom();
CSS:
#my-fancy-selector [data-is-liked]:before {
content:"\2764";
}
.another>.fancy+.foo-selector:before {
content:"\2765";
}
.another>.fancy+.baz-selector:before {
content:"\2767";
}
/* selectorsUsingFontcustom() should return sth like the following then: */
#my-fancy-selector [data-is-liked]:before,
.another>.fancy+.foo-selector:before,
.another>.fancy+.baz-selector:before {
font-family: fontcustom;
color: red;
/* ... */
}
Any ideas?

Answer 1

Use #extend with placeholder selectors like this:
%heart {
color: red;
}
h1 {
#extend %heart;
font-size: 3em;
}
h2 {
#extend %heart;
font-size: 2em;
}
li {
#extend %heart;
text-decoration: strikethrough;
}
Output:
h1, h2, li {
color: red;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
li {
text-decoration: strikethrough;
}