密新使用字體和

Question

類

圖標我在我的項目中使用的圖標與字體以下全局CSS：

[data-icon]:before { 
    font-family: 'Icons_Font'; 
    content: attr(data-icon); 
    speak: none; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 

[class*="icon-"] { 
    font-family: 'Icons_Font'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 

是否有可能創建兩個混入所以我在基地的CSS代碼放置此代碼？

我想傳遞給字體家庭的混入的名稱，例如，Icons_Font或其他。

一切都是一樣的...

Answer 1

這是可能的。

像這樣的事情對你的兩個混入：

.font-data-icon(@font-family){ 
[data-icon]:before { 
    font-family: @font-family; 
    content: attr(data-icon); 
    speak: none; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 
} 
.icon-class(@font-family){ 
[class*="icon-"] { 
    font-family: @font-family; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 
} 

，然後你可以調用混入，傳遞所需的參數：

.font-data-icon('Icons_Font'); 
.icon-class('Icons_Font'); 

，或兩者兼有隻是一個混入，如果屬性留兩者都相同：

.font-mixin(@font-family){ 
    font-family: @font-family; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 

並且在兩條規則中這樣稱呼它兩次：

[data-icon]:before { 
    .font-mixin('Icons_Font'); 
} 
[class*="icon-"] { 
    .font-mixin('Icons_Font'); 
} 

在兩種情況下，CSS輸出是：「內容：ATTR（數據並行

[data-icon]:before { 
    font-family: 'Icons_Font'; 
    content: attr(data-icon); 
    speak: none; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 
[class*="icon-"] { 
    font-family: 'Icons_Font'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
}