如何创建包含多个字体系列作为属性的 SCSS 对象

Question

我正在试验将字体系列作为属性存储到 SCSS 中的单个对象的想法。如果我的 .scss 文件中有以下项目...

$font-fam-mon: 'Montserrat', sans-serif;
$font-fam-open: 'Open Sans', sans-serif;
$font-fam-rob: 'Roboto', sans-serif;

有什么方法可以构建一个类似于这个概念的官方 scss 对象...


$gfonts: (
"mon" : 'Montserrat', sans-serif,
"open": 'Open Sans', sans-serif,
"rob" : 'Roboto', sans-serif
)

并像这样引用它...

$gfonts.mon //where needed

Answer 1

一个解决方案是创建一个函数。
语法将与您要查找的略有不同。
您将使用 font(mon)

而不是 $gfonts.mon

代码：

@use 'sass:map';
@use 'sass:string';

$gfonts: (
    "mon" : "'Montserrat', sans-serif",
    "open": "'Open Sans', sans-serif",
    "rob" : "'Roboto', sans-serif"
);

@function font($font) {
  @return string.unquote(map.get($gfonts, $font));
}

p {
    font-family: font(open);
}

该函数接受一个参数：$font。它将在您的地图 $gfonts 中查找键 $font 和 return 它的值。

输出：

p {
  font-family: 'Open Sans', sans-serif;
}

如何创建包含多个字体系列作为属性的 SCSS 对象

How to create a SCSS object that contains multiple font families as properties

sass