css - SCSS变量类名

Question

在我的网站上，我经常使用 style="font-size: #ofpx;"。但是，我想知道是否有一种方法可以用 scss 做到这一点，这样当我声明一个类时，它也会改变字体大小。例如:

<div class='col-lg-4 font-20'>whatever here</div>

这会将我的字体大小更改为 20。如果我使用 font-30，它会将我的字体大小更改为 30 等等...

我目前拥有的:

.font-#{$fontsize} {
      font-size: $fontsize;
}

Answer 1

这不能用于任意尺寸。 SCSS 的本质是需要在 应用于 HTML 之前将其扁平化为 CSS。然而，您所要求的本质上是在运行时而不是编译时创建规则。

换句话说，SCSS 使编写 CSS 的一些重复部分变得更加容易，但它不允许您做任何使用普通旧 CSS 无法做到的新事情。

你要的也是一个code smell .它闻起来像你的标记不够语义。 CSS 类的目的是将具有相似特征的对象分组，但您使用它们来描述它们赋予的样式。我建议退后一步，重新考虑您真正想要的是什么。

您显然拥有某些依赖于上下文的元素的详细信息。例如，当您想让按钮比平时更小或更大时，您可能正在将这些规则应用于按钮。您需要确定按钮发生变化的场景。如果它们在模态对话框中，它们可能会小 20%？然后编写您的常规 .button 规则，并为 .modal .button 创建规则以使其更小。

如果您确定要为 HTML 中的每个元素定义字体大小(有时有这样做的充分理由)，请继续使用内联样式。内联样式不受欢迎的唯一原因是它以损害可重用性的方式组合了模型和 View 逻辑；但是，您所要求的方式完全相同。这就是内联样式的用途。不要重新发明轮子。

综上所述，您可以使用 sass 循环为范围内的整数自动生成类。例如:

/* warning: this is generally a bad idea */
@for $i from 1 through 100 {
  .font-#{$i} {
    font-size: #{$i}px;
  }
}

这不是一个好主意。从实用的 Angular 来说，与仅使用内联样式相比，它没有任何优势，而且范围较大时，生成的文件会更大(这会影响网站加载时间)。

---

旁白:有一种 CSS 哲学(或时尚，如果您觉得不够大方)称为 Atomic CSS(或有时是函数式 CSS)，它违背了此答案中给出的经典建议。我不会就它在生成干净、可维护的代码方面的有效性发表意见，但如果按照此问题中要求的特定程度使用，它通常确实需要比单独使用 SCSS 更多的工具。