接受使用薩斯

Question

參數動態類我正在尋找的東西，這樣做：

<p class="fs12">Example with font size 12</p> 
<p class="fs14">Example with font size 12</p> 

要基於「FS」後的數字的字體大小指定段落。我不確定SASS中是否有這樣的功能。這將是一個mixin和我猜的類之間的東西。

@class fs($size) { 
    font-size: $size; 
} 

如果沒有可能，我想知道是否有任何其他的方法來此，無論是其他預處理或者這是不是一個好的做法都沒有。

Answer 1

您可以編寫生成一組類的mixin：

SCSS：

$font-sizes: 12, 14, 16; 

@each $font-size in $font-sizes { 
    .fs-#{$font-size} { 
    font-size: #{$font-size}px; 
    } 
} 

輸出CSS：

.fs-12 { 
    font-size: 12px; 
} 

.fs-14 { 
    font-size: 14px; 
} 

.fs-16 { 
    font-size: 16px; 
} 

Sassmeister demo。

---

但是，如果您認爲使用描述css屬性的類名是不好的做法。