CSS SCSS 变量类名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39518374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SCSS variable class name
提问by Gustavo Fulton
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:
在我的网站上，我一直在做 style="font-size: #ofpx;"。但是，我想知道是否有办法用 scss 来做到这一点，这样当我声明一个类时，它也会改变字体大小。例如：
<div class='col-lg-4 font-20'>whatever here</div>
and this would change my font-size to 20. If I did font-30, it would change my font-size to 30 and etc...
这会将我的字体大小更改为 20。如果我使用 font-30，它会将我的字体大小更改为 30 等等......
What I have so far:
到目前为止我所拥有的：
.font-#{$fontsize} {
font-size: $fontsize;
}
回答by Woodrow Barlow
This can't be done for arbitrary sizes. The nature of SCSS is that is needs to be flattened down to CSS beforeit gets applied to the HTML. What you are asking for, however, is essentially to create rules at run-time rather than compile-time.
对于任意大小，这是无法做到的。SCSS 的本质是在应用于 HTML之前需要将其扁平化为 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.
您要求的也是代码气味。它闻起来像你的标记不够语义。CSS 类的目的是将具有相似特征的对象分组，但您使用它们来描述它们赋予的样式。我建议退后一步，重新考虑你真正想要的是什么。
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 .buttonrules, and also create rules for .modal .buttonwhich make it smaller.
您显然拥有某些与上下文相关的元素的详细信息。例如，当您想让按钮比平时更小或更大时，您可能正在将这些规则应用于按钮。您需要确定按钮更改的场景。如果它们在模态对话框中，它们可能会小 20%？然后编写您的常规.button规则，并创建规则以.modal .button使其更小。
If you're positive that you want to define font-size for each element within the HTML (and sometimes there aregood 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.
如果您确定要为 HTML 中的每个元素定义字体大小（有时这样做是有充分理由的），请继续使用内联样式。内联样式不受欢迎的唯一原因是它以一种损害可重用性的方式结合了模型和视图逻辑；但是，您所请求的方式完全相同。这就是内联样式的用途。不要重新发明轮子。
With all of that said, you canuse sass loops to automatically generate classes for integers within a range. For example:
综上所述，您可以使用 sass 循环为范围内的整数自动生成类。例如：
/* 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).
这不是一个好主意。务实地说，与仅使用内联样式相比，它没有任何优势，并且在大范围内生成的文件会更大（这会影响网站加载时间）。
回答by Zach Herring
Just going to add, mixins are great, but if you want a util class (attach a class to an element, get that font-size applied to it, do a for-loop in SCSS like so..
只是要补充一点，mixin 很棒，但是如果你想要一个 util 类（将一个类附加到一个元素上，将字体大小应用到它，在 SCSS 中做一个 for 循环，像这样..
@for $i from 1 through 4 {
$fontsize: 10px * $i;
.font-#{$i} {
font-size: $fontsize;
}
}
compiles to
编译为
.font-1 {
font-size: 10px;
}
.font-2 {
font-size: 20px;
}
.font-3 {
font-size: 30px;
}
.font-4 {
font-size: 40px;
}
If you want the class to match the # of pixels...
如果您希望该类匹配像素数...
@for $i from 1 through 4 {
$base: 10;
$fontsize: $base * $i;
.font-#{$fontsize} {
font-size: $fontsize + 0px;
}
}
Which compiles to
编译成
.font-10 {
font-size: 10px;
}
.font-20 {
font-size: 20px;
}
.font-30 {
font-size: 30px;
}
.font-40 {
font-size: 40px;
}
回答by jmargolisvt
Of course, inline styletags are bad form. So yes, you should add some classes for font size, or just set font size on the elements you need to as you go. Up to you. If you want, you could use a mixin like so:
当然，内联style标签是不好的形式。所以是的，您应该为字体大小添加一些类，或者只是在您需要的元素上设置字体大小。由你决定。如果你愿意，你可以像这样使用 mixin：
@mixin font-size($size) {
font-size: $size;
}
.some-div { @include font-size(10px); }
But that's probably overkill unless you get a group of rules that usually go together.
但这可能是矫枉过正，除非你得到一组通常一起使用的规则。
回答by Victor Oliveira
Just for those of you who might stumble across this question in a more recent time and are new to FrontEnd Development.
仅适用于最近可能偶然发现此问题并且不熟悉前端开发的人。
What Woodrow Barlow said about using inline-styles instead of rule specific classes isn't quite an up-to-date opinion. For instance, Bootstrap has some of those and Tachyons is entirely built upon them. Actually this practice is called Atomic CSS or Functional CSS.
Woodrow Barlow 关于使用内联样式而不是规则特定类的说法并不是最新的观点。例如，Bootstrap 有其中一些，而 Tachyons 完全建立在它们之上。实际上，这种做法称为原子 CSS 或功能 CSS。
It's better explained by John Polacek in his CSS Tricks article: https://css-tricks.com/lets-define-exactly-atomic-css/
John Polacek 在他的 CSS Tricks 文章中更好地解释了这一点：https://css-tricks.com/lets-define-exactly-atomic-css/
回答by Rudi Urbanek
You can use mixins like this
你可以像这样使用mixin
@mixin font($fontsize) {
font-size: $fontsize;
}
.box {
@include font(10px);
}
