Sass-中的空变量

Bootstrap 是一个大型且复杂的前端库，具有一些强大的功能和内置的自定义功能。偶尔，我们被要求为具有更多 CSS 属性和默认变量的用户提供更具自定义性的东西。

这主要是因为自举的 CSS 依赖于一般风格的一些有限的全球继承（font，color，line-height，更多），但开发者和设计者经常要进一步自定义的东西。因此，我们通常面临添加一开始并不需要的 CSS，而您可能需要添加 CSS。这对我们所有人来说似乎都不对。

早在一月份，由于我们的维护者之一 Martijn，我们开始使用 null 值默认变量来应对这种膨胀，同时仍提高了定制水平。

这是一个基本示例：

$body-text-align: null !default;

body {text-align: $body-text-align; // Won’t compile}

如您所见，Sass 编译器将忽略整个 property: value; 声明，因为值是null。但是，如果有人在编译前通过覆盖该默认值自定义了此代码，则 CSS 会进行编译。这是一个如何覆盖默认变量的示例。

// First, override `!default` variables
$body-text-align: left;

// Second, import Bootstrap
@import“bootstrap”;

以及如何将其编译为 CSS。

body {text-align: left;}

还值得一提的是，这些 null 值也可以在 mixin 中使用。请查看这篇有关 Treehouse 的文章，以了解详细信息。

从历史上看，默认样式的更多灵活性意味着每个人都 null 可以使用更多代码，但是有了值默认变量，我们可以在保证有担保的情况下继续提供更多自定义功能，而无需向编译后的 CSS 添加膨胀。我仍然欠 Bootstrap 一个新的通行证，看看我们可以删除什么。

---

这是一篇机器翻译的搬运文章。
没有公众号需要你关注。