乐趣区

Sass-中的空变量

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

这主要是因为自举的 CSS 依赖于一般风格的一些有限的全球继承(fontcolorline-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 一个新的通行证,看看我们可以删除什么。


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

退出移动版