Sass！默认和主题化的设计系统

这是布拉德·弗罗斯特（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尽可能小，这是一件非常有用的事情。

直接连结→

翻译自: https://css-tricks.com/sass-default-and-themeable-design-systems/