限定 SCSS @font-face 变量以与 Font Face Observer 一起使用

Question

所以我维护了一个我们使用 Font Face Observer 的站点：https://fontfaceobserver.com — 我们目前定义的字体是这样的：

$serif: Georgia, Times, 'Times New Roman', serif;
$serifFontface: 'Chronicle Display', $serif;

%serif {
  font-family: $serif;
  .fonts-loaded&{
    font-family: $serifFontface;
  }
}

我们现在正在修改代码库以用作多语言站点，页面上将始终同时罗马和日文汉字字符。

我们有一个正文 class .isJa 我试过这样的范围设定，但是即使正文中没有 class，汉字字体也会出现在堆栈中：

$serif: Georgia, Times, 'Times New Roman', serif;

.isJa{
  $serif: 'hiragino kaku gothic pro', Georgia, Times, 'Times New Roman', serif;
}

$serifFontface: 'Chronicle Display', $serif;

%serif {
  font-family: $serif;
  .fonts-loaded &{
    font-family: $serifFontface;
  }
}

如何/有可能达到预期的结果？即 hiragino 字体仅在存在 .isJa 时声明，但在最初以及在 Font Face Observer 应用 .fonts-loaded class 时声明。我应该补充一点，我们仅限于 Sass v3.2.6

Answer 1

你被@extend 咬了。扩展规则仅生成一次 - 在您声明 %placeholder 的那一刻。稍后更改变量不会影响它们。这就是（原因之一）为什么通常不鼓励使用@extend。

您应该做的是使用将默认参数设置为您的初始变量值的混入。

代码：

$serifFontface: 'Chronicle Display';

@mixin fontFallback($fallback: (Georgia, Times, 'Times New Roman', serif)) {
  font-family: $fallback;
  &.fonts-loaded {
    font-family: $serifFontface, $fallback;
  }
}

body {
  @include fontFallback;
}

.isJa {
  $japaneseFallback: 'hiragino kaku gothic pro', Georgia, Times, 'Times New Roman', serif;
  @include fontFallback($japaneseFallback);
}

输出：

body {
  font-family: Georgia, Times, "Times New Roman", serif;
}
body.fonts-loaded {
  font-family: "Chronicle Display", Georgia, Times, "Times New Roman", serif;
}

.isJa {
  font-family: "hiragino kaku gothic pro", Georgia, Times, "Times New Roman", serif;
}
.isJa.fonts-loaded {
  font-family: "Chronicle Display", "hiragino kaku gothic pro", Georgia, Times, "Times New Roman", serif;
}

阅读更多关于 mixin 和扩展的内容 here and here。

限定 SCSS @font-face 变量以与 Font Face Observer 一起使用

Scoping SCSS @font-face variables for use with Font Face Observer

fonts

sass

font-face

multilingual

scoping