使用Sass來複制CSS選擇器的列表

Question

是否有更有效的方式來添加這些前綴，而不是每個圖標都有兩行？一爲fa-ion-md和一個用於fa-ios-md

$fa-menu-size: 2.4rem; 

.menu-inner { 

    .#{$fa-ion-md-css-prefix}-glass, 
    .#{fa-ion-ios-css-prefix}-glass, 
    .#{$fa-ion-md-css-prefix}-music, 
    .#{fa-ion-ios-css-prefix}-music, 
    [many more icons] 
    .#{$fa-ion-md-css-prefix}-meetup, 
    .#{fa-ion-ios-css-prefix}-meetup { 
     font-size: $fa-menu-size; 
    } 
} 

Answer 1

也許最簡單的方法是與經典ampersand parent selector去前綴與後綴結合：

$fa-ion-md-css-prefix: "fa-ion-md"; 
$fa-ion-ios-css-prefix: "fa-ion-ios"; 
$fa-menu-size: 2.4rem; 

.menu-inner { 
    .#{$fa-ion-md-css-prefix}, 
    .#{$fa-ion-ios-css-prefix} { 
     &-glass, 
     &-music, 
     &-meetup{ 
     font-size: $fa-menu-size; 
     } 
    } 
} 

Answer 2

你可以使用迭代，DEMO

$fa-menu-size: 2.4rem; 
$fa-ion-md-css-prefix: "fa-ion-md"; 
$fa-ion-ios-css-prefix: "fa-ion-ios"; 

$icons: glass, music, meetup, stuff, things; 

@each $icon in $icons { 
    #{$fa-ion-md-css-prefix}-#{$icon}, 
    #{$fa-ion-ios-css-prefix}-#{$icon} { 
    font-size: $fa-menu-size; 
    } 
}