Question

在我的网站上，我一直在做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;
}

Answer 1

对于任意大小都无法做到这一点。在将应用于HTML之前，需要将SCSS的性质简化为CSS 。但是，您要求的主要是在运行时而不是编译时创建规则。

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

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

如果您想肯定要为HTML中的每个元素定义font-size，请继续使用内联样式。内联样式的唯一原因令人不悦，因为它以一种损害可重用性的方式结合了模型和视图逻辑;但是，您要求的内容完全相同。这就是内联样式的用途。不要重新发明轮子。

所有这些都说明了，可以使用sass循环自动为一个范围内的整数生成类。例如：

@for $i from 1 through 100 { .font-#{$i} { font-size: #{$i}px; } }

这不是一个好主意。实际上，它不仅仅使用内联样式提供任何优势，而且对于大范围，您生成的文件会更大（这会影响网站加载时间）。

这是此技术的runnable jsFiddle example。

Answer 2

只是要添加，mixins很棒，但是如果你想要一个util类（将一个类附加到一个元素，获得应用它的font-size，那么在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.

Answer 3

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

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

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

但除非你得到一组通常合在一起的规则，否则这可能是过度的。

Answer 4

当变量使用“单词”而不是“数字”时，并且单词不在类名的末尾。我可以使用 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 类命名的某些情况下，它可能会由于通配符选择器而受到限制，它比特定的类选择器规则“大”。

Answer 5

你可以使用像这样的mixins

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

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

Answer 6

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

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

John Polacek在他的CSS Tricks文章中更好地解释了这一点： https://css-tricks.com/lets-define-exactly-atomic-css/

SCSS变量类名

6 个答案: