SCSS变量类名

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

任何尺寸都无法做到这一点.SCSS的本质是在应用于HTML 之前需要将其展平为CSS .但是,您要求的主要是在运行时而不是编译时创建规则.

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

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

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

尽管如此,您可以使用sass循环自动为一个范围内的整数生成类.例如:

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

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

这是一个可运行的jsFiddle这种技术的例子.

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示例.

Answer 3

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

萨斯

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

超文本标记语言

<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 类命名的某些情况下，它可能会由于通配符选择器而受到限制，该选择器比特定的类选择器规则“更大”。