SCSS 变量类名答案

【问题标题】：SCSS variable class nameSCSS 变量类名
【发布时间】：2023-04-03 12:05:02
【问题描述】：

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

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

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

到目前为止我所拥有的：

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

【问题讨论】：

第一：你在滥用 CSS 类。你的类不应该以它们赋予的样式命名，它们应该为元素添加语义含义。第二：你真的有这么多字体大小，需要这种粒度级别吗？
有很多不同的元素我想专门选择 font-size ）：
好的，谢谢大家！
20 什么？ 30 什么？
@connexo root em's，基本字体大小为 24px。

标签： css sass

【解决方案1】：

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

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

您要的也是code smell。闻起来你的标记不够语义化。 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 更多的工具。

【讨论】：

这是一个非常有用的答案。非常感谢并祝贺您的知识:)

【解决方案2】：

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

@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;
}

Codepen example.

【讨论】：

【解决方案3】：

当变量使用“单词”而不是“数字”，并且单词不在类名的末尾时。我可以使用 CSS 属性选择器（“通配符选择器”）来解决问题。我可以遍历地图对象，并使用文本值来构建 CSS 选择器。

SASS

//map
$colors: (
  primary: #121212,
  success: #8bcea8
);

//loop
@each $color, $value in $colors {
  //can't do this: div.first-class.is-style-#{$color}-component
  //can do this:
  div.first-class[class*="is-style-#{$color}-component"] {
     background-color: $value;
  }
}

HTML

<div class="first-class is-style-primary-component"></div>

这将生成一个div.myComponent[class*="is-style-primary-component"] 选择器，因此<div class="first-class is-style-primary-component"></div>（.first-class 不是必需的，选择器可以是div[class*="is-style-#{$color}-component"] 甚至是[class*="is-style-#{$color}-component"]）。

然而，在某些 CSS 类命名的情况下，它可能会受到通配符选择器的限制，它比特定的类选择器规则“更大”。

【讨论】：

【解决方案4】：

当然，内联style 标签是不好的形式。所以是的，你应该添加一些字体大小类，或者只是在你需要的元素上设置字体大小。由你决定。如果你愿意，你可以像这样使用 mixin：

@mixin font-size($size) {
  font-size: $size;
}

.some-div { @include font-size(10px); }

但这可能有点矫枉过正，除非你有一组通常一起使用的规则。

【讨论】：

是的，我真正想要的是将类描述中的字体大小声明为 class="font-20"
你不需要 sass。您在主要问题上得到的 cmets 是好的。我会回应他们的观点，即您可能以错误的方式处理此问题。将语义放在首位，从长远来看，您会更快乐。
你甚至用这个保存任何打字吗？

【解决方案5】：

仅适用于最近可能偶然发现此问题并且对前端开发不熟悉的人。

Woodrow Barlow 所说的使用内联样式而不是特定于规则的类并不是最新的观点。例如，Bootstrap 有其中的一些，而 Tachyons 完全建立在它们之上。实际上，这种做法称为 Atomic CSS 或 Functional CSS。

John Polacek 在他的 CSS Tricks 文章中对此进行了更好的解释： https://css-tricks.com/lets-define-exactly-atomic-css/

【讨论】：

【解决方案6】：

你可以像这样使用 mixins

    @mixin font($fontsize) {
      font-size: $fontsize;
    }

    .box { 
        @include font(10px); 
    }

【讨论】：