SCSS变量类名称 [英] SCSS variable class name

问题描述

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

On my website, I'm constantly doing style="font-size: #ofpx;". However, I was wondering if there's a way to do it with scss so that, when I declare a class, it would also change the font size. For example:

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

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

and this would change my font-size to 20. If I did font-30, it would change my font-size to 30 and etc...

到目前为止，我所拥有的内容：

What I have so far:

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

推荐答案

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

This can't be done for arbitrary sizes. The nature of SCSS is that is needs to be flattened down to CSS before it gets applied to the HTML. What you are asking for, however, is essentially to create rules at run-time rather than compile-time.

换句话说，SCSS使得编写以下代码的某些重复部分变得更加容易CSS，但不允许您做普通的旧CSS不可能完成的新工作。

In other words, SCSS makes it easier to write some of the repetitive parts of CSS, but it doesn't allow you to do anything new that wasn't already possible with plain old CSS.

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

What you're asking for is also a code smell. It smells like your markup isn't semantic enough. The purpose of a CSS class is to group objects with similar characteristics, but you're using them instead to describe the styles they impart. I would suggest stepping back and reconsidering what it is that you really want.

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

You obviously have details of certain elements that are context-dependent. For example, maybe you are applying these rules to buttons when you want to make them smaller or larger than usual. You need to identify the scenarios in which the buttons change. Maybe they are 20% smaller if they are in a modal dialog? Then write your normal .button rules, and also create rules for .modal .button which make it smaller.

如果您肯定要为HTML中的每个元素定义字体大小（有时这样做有 个充分的理由），请继续使用内联样式。拒绝内联样式的唯一原因是因为它以损害可重用性的方式结合了模型和视图逻辑。但是，您要执行的操作完全相同。这就是内联样式的目的。

If you're positive that you want to define font-size for each element within the HTML (and sometimes there are good reasons for doing so), just continue using inline styles. The only reason inline styling is frowned upon is because it combines model and view logic in a way that harms reusability; however, what you are requesting does so in exactly the same way. This is what inline styles were made for. Don't re-invent the wheel.

话虽如此，您可以使用sass循环为范围内的整数自动生成类。例如：

With all of that said, you can use sass loops to automatically generate classes for integers within a range. For example:

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

这不是一个好主意。仅仅使用内联样式并没有很大的优势，结果文件会更大（这会影响网站加载时间）。

This is not a good idea. Pragmatically speaking it doesn't offer any advantages over just using inline styles and with large ranges your resulting file will be larger (which affects website load times).

这篇关于SCSS变量类名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！