Sass控制指令，用于向具有现有属性的元素添加属性

Question

我在这里引用文档：

sass docs

并尝试查看是否可以使用if语句将字母间距属性应用于使用特定字体系列的每个类。

我已经尝试了

h1 {
  @if font-family == 'Open Sans Condensed' {letter-spacing: 0.1em;}
}

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

希望输出：

h1 {
  font-family: 'Open Sans Condensed';
  letter-spacing: 0.1em;
}

哪个不起作用。我非常确定我是从错误的角度来解决这个问题。任何人都可以验证这种用法是否可行？

Answer 1

你可以通过两种方式来解决这个问题：

1）包括字母间距作为font-face定义的一部分。

@font-face {
  font-family: 'Open Sans';
  src: [urls for various formats go here];
  letter-spacing: 0.1em;
 }

如果您从外部样式表中加载字体，例如使用谷歌字体或类似字体，您仍然可以声明第二个font-face块，其中包含字体系列和字母 - 间距规则。

2）使用sass mixin。您可以使它变得非常简单或更灵活，具体取决于您是否要考虑多种字体。

基本的单字体设置：

@mixin font-styles() {
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: 0.1em;
}

h1 {
  @include font-styles;
}

或参数化多种字体样式：

@mixin font-styles($font: 'headings') {
   @if $font == 'headings' {
     font-family: 'Open Sans Condensed', sans-serif;
     letter-spacing: 0.1em;
   }
   @elseif $font == 'text' {
      font-family: 'Open Sans', sans-serif;
      [related font styles go here]
   }
   [add more font style sets as needed]
}

h1 { @include font-styles('headings'); }
p { @include font-styles('text'); }