创建动态css类ex .font-size {font-size：size}

Question

是否可以创建动态css字体类，例如标题中size中的.font-size成为用作size的参数：

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

你可以添加

<p class="font-14"> 

将调用

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

Answer 1

如果您想动态生成带有相应类的CSS字体声明，您应该查看CSS Preprocessors或SASS等LESS。

这是SCSS的一个例子：

@for $i from 14 through 30 {
  .font-#{$i} {
    font-size: $i + px; 
  }
}

这将输出：

.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
...
.font-30 { font-size: 30px; }