我在工作中使用 CSS Grid 已经有几个月了,我非常喜欢它在页面布局时给我的灵活性。这么长时间以来,我们一直没有一个真正的网格布局解决方案——用浮动和 flexbox 总是有各种各样的限制。但现在,我真的无法想象没有 Grid 的 CSS!
最近我还注意到的一件事就是 CSS 自定义属性。CSS 自定义属性的工作方式有点像 SASS 和其他预处理器中的变量,主要的区别在于其它方法都是在浏览器中编译后生成,还是原本的 CSS 写法。CSS 自定义属性是真正的动态变量,可以在样式表中或使用 javascript 即时更新,这使得它们具有更多的可能性。如果你熟悉 JavaScript,我喜欢把预处理器变量和 CSS 自定义属性之间的区别想象成与 const 和 let 之间的区别相似——它们都有不同的用途。
CSS 自定义属性可以方便的实现很多功能(例如主题变化)。最近我一直在尝试利用 CSS 自定义属性和 CSS 网格的组合能实现什么神奇的效果,我需要在不同的断点处重新定义 grid-template-rows 和 grid-template-columns 属性。下面的代码中有一个例子,我使用 SASS 变量定义了页面在不同的宽度下不同的列宽值,这些值将传递到 grid-template-rows 属性中。我对 grid-gap 属性也做了同样的操作,这样页面宽度不同时元素之间的间距也是不同的:
$wrapper: 1200px;
$col: 1fr;
$gutter: 20px;
$wrapper-l: 90%;
$col-l: calc((1000px - (13 * 40px)) / 12);
$gutter-l: 40px;
$col-xl: calc((1200px - (13 * 50px)) / 12);
$gutter-xl: 50px;
body {background-color: lighten(grey, 30%);
}
.wrapper {
max-width: $wrapper;
margin: 20px auto;
@media (min-width: 1300px) {max-width: $wrapper-l;}
}
.grid {
display: grid;
padding: $gutter;
grid-template-columns: 1fr repeat(12, $col) 1fr;
grid-template-rows: repeat(2, minmax(150px, auto));
grid-gap: $gutter;
border: 1px solid grey;
background: white;
width: auto;
@media (min-width: 1300px) {grid-template-columns: 1fr repeat(12, $col-l) 1fr;
grid-gap: $gutter-l;
padding: $col-l;
}
@media (min-width: 1500px) {grid-template-columns: 1fr repeat(12, $col-xl) 1fr;
grid-gap: $gutter-xl;
padding: $col-xl;
}
}
.grid__item {border: 1px solid blue;}
.grid__item--heading {grid-column: 2 / 11;}
点击查看上图的全部代码和实时效果
就如你所看到的,基本上必须在媒体查询中再次写出整个代码块来改变样式,因为变量一旦定义就固定了。(我当然可以使用 mixin,但是最终效果是一样的——一大块代码。)
使用 CSS 自定义属性,可以减少代码量,因为我只需更新媒体查询中的变量,浏览器就会重新计算网格。十行(sass)代码可能看起来不是一个巨大的节省,但代码的可读性要高得多,因为不必在好几个地方添加媒体查询来处理我们的新变量,我只需在该组件的代码开头声明它们,并且无需担心是否已替换了正在使用的哪个值:
:root {
--wrapper: 1200px;
--col: 1fr;
--gutter: 20px;
@media (min-width: 1300px) {
--wrapper: 90%;
--col: calc((1000px - (13 * 40px)) / 12);
--gutter: 40px;
}
@media (min-width: 1500px) {
--wrapper: 90%;
--col: calc((1200px - (13 * 50px)) / 12);
--gutter: 50px;
}
}
body {background-color: lighten(grey, 30%);
}
.wrapper {max-width: var(--wrapper);
margin: 20px auto;
}
.grid {
display: grid;
padding: var(--gutter);
grid-template-columns: 1fr repeat(12, var(--col)) 1fr;
grid-template-rows: repeat(2, minmax(150px, auto));
grid-gap: var(--gutter);
border: 1px solid grey;
background: white;
width: auto;
}
.grid__item {border: 1px solid blue;}
.grid__item--heading {grid-column: 2 / 11;}
.grid__item--body {
grid-column: 2 / 8;
grid-row: 2 / span 1;
}
.grid__item--media {
background: hotPink;
grid-column: 11 / 14;
grid-row: 1 / span 2;
}
点击查看全部代码和实时效果
我发现使用 CSS Grid 的一个特点是,语法非常冗长,而且并不容易快速、轻松地看到正在发生的事情,特别是在复杂的网格中。但是在这个例子中,使用 CSS 自定义属性,可以为网格项的大小和坐标设置变量,并且只写一次 grid-column 和 grid-row 属性。对我来说,这比每次都写出完整的属性要清楚得多,而且很容易一目了然地看到网格项的位置。
这里有一个随机动态改变自定义变量的 DEMO,在这个示例中,我使用 javascript 循环网格项,并在每次单击按钮时使用随机值更新变量。没有添加类或额外的 CSS。
在这个的示例 DEMO 中,使用用户输入的值动态更改网格项。这里要更新的只是 x 和 y 坐标的三个变量以及网格项的大小。
太多的可能性了!
浏览器支持
目前,全球 88% 的浏览器都支持 CSS 自定义属性——Internet Explorer 11 及以下版本是明显的例外。这与对 CSS Grid 网格布局的支持大致相同,这意味着要使用特性查询来区分支持与不支持的浏览器。
可以这样使用 @supports 声明来测试对 css 自定义属性的支持:
@supports(--css: variables) {
.my-div {
--size: 2;
--posX: 3;
grid-column: var('--posX') / span var('--size');
}
}