SCSS变量类名称

小小2020-03-23

在我的网站上，我一直在做style =“ font-size：#ofpx;”。但是，我想知道是否有一种方法可以用scss做到这一点，以便在我声明一个类时，它也可以更改字体大小。例如：

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

这会将我的字体大小更改为20。如果我使用font-30，则会将我的字体大小更改为30，依此类推...

到目前为止，我有：

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

小胖Gil2020/03/23 09:30:00

您可以像这样使用mixin

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

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

西门蛋蛋2020/03/23 09:30:00

只是要添加，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;
}

小小Green2020/03/23 09:30:00

只适合那些可能在最近一段时间偶然发现这个问题并且是FrontEnd Development的新手的人。

Woodrow Barlow说的关于使用内联样式而不是规则特定的类的说法并不是最新的观点。例如，Bootstrap拥有其中一些，而Tachyons完全基于它们。实际上，这种做法称为原子CSS或功能CSS。

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

Tom凯2020/03/23 09:30:00

当然，内联style标签是错误的形式。因此，是的，您应该添加一些字体大小的类，或者随便在需要的元素上设置字体大小。由你决定。如果需要，可以使用mixin，如下所示：

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

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

但是，除非您获得通常会合在一起使用的一组规则，否则这可能是过大的。

番长2020/03/23 09:30:00

对于任意大小，无法完成此操作。SCSS的本质是，在将其应用于HTML 之前，需要将其简化为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;
  }
}

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

Newest Answer