如何处理 Sass 中未配置的变量

Question

在下面的 Sass 文件中，我正在创建一个简单的 css 结构，我可以在其中设置第一行中的所有字体。

$global-font-family:          'Open Sans', sans-serif;
/*h1*/
$h1-font-family:               inherit;
$h1-font-size:                 4em;
$h1-letter-spacing:            inherit;
$h1-line-height:               inherit;
$h1-text-transform:            inherit;
/*h2*/
$h2-font-family:               inherit;
$h2-font-size:                 3em;
$h2-letter-spacing:            inherit;
$h2-line-height:               inherit;
$h2-text-transform:            inherit;
h3,h4,h5,ecc.

h1, h2, h3, h4, h5, h6, p {
  font-family: $global-font-family;
}
h1 {
  font-family: $h1-font-family;
  font-size: $h1-font-size;
  letter-spacing: $h1-letter-spacing;
  line-height: $h1-line-height;
  text-transform: $h1-text-transform;
}
h2 {
  font-family: $h2-font-family;
  font-size: $h2-font-size;
  letter-spacing: $h2-letter-spacing;
  line-height: $h2-line-height;
  text-transform: $h2-text-transform;
}
h3,h4,h5 ecc.

首先，将字体系列应用于h1，h2，h3，p。然后，您可以更改每个标签，但这不是必需的。例如，如果将全局字体系列 Open Sans 设置为 all，并且 h1 必须是 Open Sans，则将 h1 留空。

但。。。我如何将 h1 留给 Open Sans 而不删除它 h1 { font-family: $h1-font-family }

"继承"是正确的方式吗？最干净的解决方案是什么？

谢谢

Answer 1

一般来说，如果你正在创建一个模板，我认为最好只编写全局规则，让用户在他们喜欢的任何模型中自定义他们需要的任何内容。我的意思是，你应该省略所有的h1，h2特定的规则，让他们在需要时编写选择器。他们始终可以通过附加自定义规则来覆盖您的 CSS。

但是，如果您想遵循定义他们应该使用的变量名称的模型，仅当用户定义了预期的变量时才设置属性，然后是 @if 指令或 if() 函数以及 variable-exists ，global-variable-exists可能对您有用，如下面的代码片段(这是一个简化的示例(。我认为这使它变得非常复杂，但它是你的选择。

$global-font-family:          'Open Sans', sans-serif;
$global-font-size:            3em;
/*h1*/
$h1-font-family:               'Roboto Sans', sans-serif;
/*h2*/
$h2-font-size:                 1em;
h1, h2, h3, h4, h5, h6, p {
  font-family: $global-font-family;
}
h1 {
  @if (global-variable-exists(h1-font-family) or variable-exists(h1-font-family)){
    font-family: $h1-font-family;
  }
  font-size: if((global-variable-exists(h1-font-size) or variable-exists(h1-font-size)), 
                $h1-font-size, 
                $global-font-size);
}
h2 {
  @if (global-variable-exists(h2-font-family) or variable-exists(h2-font-family)){
    font-family: $h2-font-family;
  }
  font-size: if((global-variable-exists(h2-font-size) or variable-exists(h2-font-size)), 
                $h2-font-size, 
                $global-font-size);
}

variable-exists函数检查变量是否在局部作用域中定义，而global-variable-exists检查变量是否在全局作用域中定义。如果已定义，则我们使用用户提供的值。否则，我们不执行任何操作或使用全局字体设置。

在代码片段中，我还演示了 @if 指令和 if 函数。它们有微妙的差异。@if 指令仅在变量存在时才打印属性(此处font-family(，而在函数的情况下if，如您所见，无论变量是否存在，都会打印属性。如果变量存在，则使用用户定义的值，否则使用全局设置。选择使用哪一个取决于您。

下面是编译的 CSS：

h1, h2, h3, h4, h5, h6, p {
  font-family: "Open Sans", sans-serif;
}
h1 {
  font-family: "Roboto Sans", sans-serif;
  font-size: 3em;
}
h2 {
  font-size: 1em;
}

在这里，由于$h2-font-family不是单独定义的，因此它不会在此处打印font-family，因此将使用h1, h2, h3, h4, h5, h6, p中定义的全局。

---

注意：inherit并不意味着从上一个匹配选择器继承值。这意味着从父级继承值。因此，例如，如果您需要body具有Arial字体，则全局设置是让h1, h2, h3具有Verdana，然后如果您将$h1-font-family设置为inherit，它将Arial字体应用于h2而不是应用Verdana(如果用户没有定义任何内容(。这可能不是你所追求的。

body {
  font-family: Arial;
}
h1, h2, h3 {
  font-family: Verdana;
}
h2 {
  font-family: inherit;
}

<h1>Some Heading 1</h1>
<h2>Some Heading 2</h2>
<h3>Some Heading 3</h3>

Answer 2

首先创建变量的原因是更快地进行更改并保持一致。如果要将 h1 字体应用于所有标题或主要标题，请在该标题之后命名变量。或者干脆继承。前任：

$font-heading-primary: 'Open Sans', sans-serif;
$font-heading-secondary: 'Halfway Sans', sans-serif;
$font-family-paragraph: 'Closed Sans', sans-serif;
$font-size-lg: 3rem;
$font-size-md: 2rem;
$font-size-sm: 1rem;
h1 {
    font-family: $font-heading-primary;
    font-size: $font-size-lg;
}
h2 {
    font-family: $font-heading-primary;
    font-size: $font-size-md;
}
h3 {
    font-family: $font-heading-secondary;
    font-size: $font-size-sm;
}
p {
    font-family: $font-paragraph;
}

Answer 3

有很多方法可以构建您的 SCSS，但很容易陷入像您的示例这样的矫枉过正的情况。如果我是你，我会尝试驾驭级联的力量;在body或一组基本元素上设置字体系列，这样您就不会重新声明数百次。

body,
button,
input,
select,
textarea,
address,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: $global-font-family;
}