Sass !default 和可主题化设计系统

这是一篇来自 Brad Frost 的很棒的博文，他在文中向我们介绍了一个有趣的例子。 假设我们要制作一个主题，并且有一些像这样的 Sass 代码

.c-text-input {
  background-color: $form-background-color;
  padding: 10px
}

如果 $form-background-color 变量未定义，则我们不希望在 CSS 中输出 background-color。 事实上，我们希望输出看起来像这样

.c-text-input {
  padding: 10px;
}

看到没有 background-color 属性。 正如 Brad 所示，使用 Sass 的 !default 标志可以实现这一点。 您可以在设置变量时像这样使用它

$form-background-color: null !default;

.c-text-input {
  background-color: $form-background-color; /* this line won’t exist in the outputted CSS file */
  padding: 10px;
}

$form-background-color: red;

.c-text-input-fancy {
  background-color: $form-background-color; /* this line will be “red” because we defined the variable */
  padding: 10px;
}

如果您希望确保在使用 Sass 创建复杂主题时 CSS 尽可能小，那么这是一件非常有用的事情。

直接链接 →