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;
  }
}

我们现在正在修改代码库以用作多语言网站，其中页面上始终会有罗马字符和日文汉字字符。

我们有一个身体类.isJa，我尝试了这样的范围，但即使身体没有类，汉字字体也会出现在堆栈中：

$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类时也声明。我应该补充一点，我们仅限于Sass v3.2.6

Answer 1

你被@extend咬了。扩展规则仅生成一次 - 在您声明％占位符的确切时刻。稍后更改变量不会影响它们。这是（原因之一）为什么不鼓励使用@extend。

你应该做的是使用一个默认参数设置为初始变量值的mixin。

代码：

$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;
}

详细了解mixins并扩展here和here。

确定用于Font Face Observer的SCSS @ font-face变量

1 个答案: