由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; 
}