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 一个新的通行证,看看我们可以删除什么。
这是一篇机器翻译的搬运文章。
没有公众号需要你关注。