接受使用萨斯

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属性的类名是不好的做法。