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

在下面的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。然后，您可以更改每个标记，但这不是必需的。例如，如果将全局字体系列“打开SAN”设置为“全部”，并且h1必须是“打开SAN”，则将h1保留为空

但是。。。我如何离开h1打开SAN而不删除它 h1{font family:$h1 font family}

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

---

谢谢

您首先创建变量的原因是为了更快地进行更改并保持一致。如果要将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;
}

---

有很多方法可以解释如何构建SCS，但是很容易陷入像您的示例那样的过度使用的情况。如果我是你，我会尝试利用瀑布的力量；在主体或基本元素集上设置字体系列，这样就不会重复数百次

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

---

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

但是，如果您想按照您的模型定义他们应该使用的变量名，那么仅当用户定义了预期的变量时才设置属性，那么指令或函数以及，对于您来说可能很有用，就像下面的代码片段中的简化示例一样。我认为这让事情变得非常复杂，但这是你的选择

$global字体系列：“开放式Sans”，无衬线； $global字体大小：3em； /*h1*/ $h1字体系列：“Roboto Sans”，无衬线； /*氢*/ $h2字体大小：1em； h1，h2，h3，h4，h5，h6，p{ 字体系列：$global字体系列； } h1{ @如果全局变量-existsh1-font-family或变量-existsh1-font-family{ 字体系列：$h1字体系列； } 字体大小：如果全局-variable-existsh1-font-size或variable-existsh1-font-size， $h1字体大小， $global字体大小； } 氢{ @如果全局变量-existsh2-font-family或变量-existsh2-font-family{ 字体系列：$h2字体系列； } 字体大小：如果全局-variable-existsh2-font-size或variable-existsh2-font-size， $h2字体大小， $global字体大小； } variable exists函数检查变量是否在局部范围内定义，而全局变量exists检查变量是否在全局范围内定义。如果已定义，则使用用户提供的值。否则，我们将不执行任何操作或使用全局字体设置

在代码片段中，我还演示了@if指令和if函数。他们有细微的差别。@if指令仅在变量存在时才在此处打印属性字体系列，而在if函数的情况下，可以看到，无论变量是否存在，都会打印属性字体系列。如果变量存在，则使用用户定义的值，否则使用全局设置。选择使用哪一个取决于您

以下是已编译的CSS：

h1，h2，h3，h4，h5，h6，p{ 字体系列：开放式Sans，无衬线； } h1{ 字体系列：Roboto Sans，Sans serif； 字号：3em； } 氢{ 字号：1em； } 由于$h2字体系列没有单独定义，因此它不会在此处打印字体系列，因此将使用h1、h2、h3、h4、h5、h6、p中定义的全局字体系列

注意：inherit并不意味着从上一个匹配选择器继承值。这意味着从父级继承值。所以，例如，如果您需要body具有Arial字体，全局设置是h1、h2、h3具有Verdana，那么如果您将$h1字体系列设置为继承，则如果用户未定义任何内容，它将对h2应用Arial字体，而不是应用Verdana。这可能不是你想要的

身体{ 字体系列：Arial； } h1，h2，h3{ 字体系列：Verdana； } 氢{ 字体家族：继承； } 标题1 标题2

---

某些标题3Hi Mike，$global字体系列在哪里为什么要全球化字体族以立即覆盖？更好的方法是只声明必要的内容。我想用Sass创建一个模板，我不知道用户是否会使用全局字体或自定义每个标记……我理解这一点，但从设计师的角度来看，限制并没有那么糟糕。如果这个人知道他在做什么，他知道如何改变它。当然，我已经做了h1，h2，h3，h4，h5，h6，p ecc{font family:$global font family；}但是如果我需要定制，例如h1？