创建动态css类，例如.font-size { font-size: size}

Question

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

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

你还可以添加

<p class="font-14"> 

，它将调用

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

Answer 1

如果你想用相应的类动态地生成CSS字体声明，你应该看看像SASS或LESS这样的CSS Preprocessors。

下面是一个使用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; }