由mixin创建的选择器的聚合可能吗？

Question

我试着让mixin“记住”它所产生的选择器，所以我可以在最后做一个批量选择器。

为了说明什么，我试图做的 - 我的mixin看起来像这样：

@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; 
    /* ... */ 
} 

显然，有需要一些更多的样式声明，例如字体系列，颜色等。

我想避免重复声明，所以我的问题是：有没有办法让mixin“记住”导致应用它的选择器，并将它们以逗号分隔列表，这会导致类似以下内容？

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; 
    /* ... */ 
} 

任何想法？

Answer 1

使用@extend与占位选择这样的：

%heart { 
    color: red; 
} 

h1 { 
    @extend %heart; 
    font-size: 3em; 
} 

h2 { 
    @extend %heart; 
    font-size: 2em; 
} 

li { 
    @extend %heart; 
    text-decoration: strikethrough; 
} 

输出：

h1, h2, li { 
    color: red; 
} 

h1 { 
    font-size: 3em; 
} 

h2 { 
    font-size: 2em; 
} 

li { 
    text-decoration: strikethrough; 
}