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

Question

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

我想要多种样式的某些变量。例如与字体相关的内容。

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

我声明了一个变量

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

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

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

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

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

谢谢。

Answer 1

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

@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>