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一个新的通行证，看看我们可以删除什么。

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