时间戳

首页 > 解决方案 > 使用具有多种样式的 Scss 变量？

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

问题描述

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

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

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

我声明了一个变量

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

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

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

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

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

谢谢。

标签： csssass

解决方案

你可以通过 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>

推荐阅读