新手上路，请多包涵

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

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

这会将我的字体大小更改为 20。如果我做了 font-30，它会将我的字体大小更改为 30 等等…

到目前为止我所拥有的：

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

原文由 Gustavo Fulton 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.9k

2 个回答

得票最新

✓ 已被采纳

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

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

您所要求的也是代码气味。闻起来你的标记不够语义化。 CSS 类的目的是对具有相似特征的对象进行分组，但您使用它们来描述它们赋予的样式。我建议退后一步，重新考虑你真正想要的是什么。

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

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

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

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

这不是一个好主意。 务实地说，与仅使用内联样式相比，它没有任何优势，并且在大范围内，您生成的文件会更大（这会影响网站加载时间）。

旁白：有一种 CSS 哲学（或时尚，如果你觉得不厚道）称为 Atomic CSS（或有时是功能 CSS），它违背了这个答案中给出的经典建议。我不会就其在生成干净、可维护的代码方面的有效性发表意见，但如果与此问题中要求的特定程度一起使用，它通常需要比单独使用 SCSS 更多的工具。

原文由 Woodrow Barlow 发布，翻译遵循 CC BY-SA 4.0 许可协议

只是要添加，mixins 很棒，但是如果你想要一个 util 类（将一个类附加到一个元素，将字体大小应用到它，在 SCSS 中做一个 for-loop 就像这样……

 @for $i from 1 through 4 {
    $fontsize: 10px * $i;
    .font-#{$i} {
        font-size: $fontsize;
        }
}

编译为

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

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

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

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

如果你想让类匹配像素的#…

 @for $i from 1 through 4 {
    $base: 10;
    $fontsize: $base * $i;
    .font-#{$fontsize} {
        font-size: $fontsize + 0px;
        }
}

哪个编译为

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

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

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

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

原文由 Zach Herring 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

推荐问题

SCSS 变量类名