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设置为{{1}它会将inherit字体应用于Arial，而不是应用h2（如果用户没有定义任何内容）。这可能不是你追求的目标。

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

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

如何在Sass中处理非配置变量

3 个答案: