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

【问题标题】：Using Scss variables with multiple styles?使用具有多种样式的 Scss 变量？
【发布时间】：2019-08-16 18:22:07
【问题描述】：

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

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

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

我声明了一个像

这样的变量

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

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

这样声明变量是否正确？

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

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

谢谢。

【问题讨论】：

标签： css sass

【解决方案1】：

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

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

不过，您也可以在原生 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>

【讨论】：