使用具有多种样式的Scss变量？

Question

我正在进入 scss，并一直在尝试通过变量应用我的大部分样式。

我想要具有多种样式的某些变量。例如与字体相关的东西。

我希望所有 12px 大小的字体都是红色的。

我声明了一个变量，如

$font-12: (font-size: 12x, color: red)

显然我不能像普通变量一样应用这个变量，因为它包含多种样式。

这是声明这样的变量的正确方法吗？

我可以像这样应用这个变量吗？

如果不是，使用scss应用相关样式的正确方法是什么？

谢谢。

Answer 1

你可以通过 mixins 来做到这一点。

@mixin font-12(){
  font-size: 12px;
  color: red;
}

文档：https://sass-lang.com/guide

但是您也可以在原生 CSS 中执行此操作。

只需创建一个实用程序类（这是一个普通的CSS类，我称其为实用程序类，因为它是可重用的）：

.font-12 { 
   font-size: 12px;
   color: red;
}

并将此类应用于您想要的任何元素 IE:

<div class="card font-12"> ..some card... </div>
<h3 class="card-title font-12"> .. some card title.. </h3>

Answer 2

我很抱歉，我本来想评论alex067的答案，但由于我在这里不太活跃，我的声誉不足以发表评论，因此我必须将其发布为答案：

使用 mixin 正是正确的答案。

但是：我强烈建议反对第二个提议的选项！ 虽然这在技术上是正确的，但这样做一开始就违背了使用 CSS 的全部目的。如果我们这样做的话，我们或多或少可以回到使用旧式字体颜色标签等。

CSS 被用来从设计中抽象内容/语义有很多很好的理由。如果你想采用纯 CSS 方式（没有 SASS），至少将你的样式命名为“不重要”或“按行”之类的名称，这样当你为不同的屏幕、高对比度方案、屏幕重新定义它时它才有意义。阅读器输出等

[有了 Bootstap 和所有其他该死的框架，似乎没有人关心清晰的可访问结构和正确使用东西；我为按预期方式做事所做的努力可能是徒劳的 - 但我仍然觉得有必要为之奋斗。]

Answer 3

这就是我正在努力的！直到明天晚上我才会知道它是否有效，但如果你在我之前完成它，这里有一个故障：

_variables.scss file: // mobile header styles:
$pageHeader-sectionHeader-styles: ( 'font-size': 24px, 'line-height': 32px, 'font-weight': 700, );
_styles.scss file: .header {
  font-size: map-get($pageHeader-sectionHeader-styles, 'font-size');
  font-weight: map-get($pageHeader-sectionHeader-styles, 'font-weight');
  line-height: map-get($pageHeader-sectionHeader-styles, 'line-height');
}