最近我还注意到的一件事就是CSS自定义属性。CSS自定义属性的工作方式有点像萨斯和其他预处理器中的变量,主要的区别在于其它方法都是在浏览器中编译后生成,还是原本的CSS写法。CSS自定义属性是真正的动态变量,可以在样式表中或使用javascript即时更新,这使得它们具有更多的可能性。如果你熟悉javascript,我喜欢把预处理器变量和CSS自定义属性之间的区别想象成与常量和让之间的区别相似,它们都有不同的用途。
CSS自定义属性可以方便的实现很多功能(例如主题变化)。最近我一直在尝试利用CSS自定义属性和CSS网格的组合能实现什么神奇的效果,我需要在不同的断点处重新定义grid-template-rows和grid-template-columns属性。下面的代码中有一个例子,我使用SASS变量定义了页面在不同的宽度下不同的列宽值,这些值将传递到grid-template-rows属性中。我对grid-gap属性也做了同样的操作,这样页面宽度不同时元素之间的间距也是不同的:
<前> 包装:美元,1200 px; 上校:美元,1 fr; 地沟:美元,20 px; 美元wrapper-l: 90%; col-l:美元,calc (1000 px 作用;(13,*,40 px)),/, 12); gutter-l:美元,40像素; col-xl:美元,calc (1200 px 作用;(13,*,50 px)),/, 12); gutter-xl:美元,50 px; body { background - color,,,:,减轻(灰色,30%); } .wrapper { ,,,max-width:,美元包装; ,,,保证金:,20 px 汽车; ,,,@media (min-width: 1300 px), { ,,,,,,,max-width:, wrapper-l美元; ,,,} } .grid { ,,,显示:,网格; ,,,填充:,地沟美元; ,,,grid-template-columns:, 1 fr 重复(12,坳美元),1 fr; ,,,grid-template-rows:,重复(2),极大极小(150 px,,汽车)); ,,,grid-gap:,地沟美元; 边境:,,,,1 px solid 灰色; ,,,背景:,白色; ,,,宽度:,汽车; ,,,@media (min-width: 1300 px), { ,,,,,,,grid-template-columns:, 1 fr 重复(12,col-l美元),1 fr; ,,,,,,,grid-gap:, gutter-l美元; ,,,,,,,填充:,col-l美元; ,,,} ,,,@media (min-width: 1500 px), { ,,,,,,,grid-template-columns:, 1 fr 重复(12,col-xl美元),1 fr; ,,,,,,,grid-gap:, gutter-xl美元; ,,,,,,,填充:,col-xl美元; ,,,} } .grid__item { 边境:,,,,1 px solid 蓝色; } .grid__item——heading { ,,,grid-column:, 2,/, 11; } 之前
就如你所看到的,基本上必须在媒体查询中再次写出整个代码块来改变样式,因为变量一旦定义就固定了。(我当然可以使用混合,但是最终效果是一样的,一大块代码)。
使用CSS自定义属性,可以减少代码量,因为我只需更新媒体查询中的变量,浏览器就会重新计算网格。十行(sass)代码可能看起来不是一个巨大的节省,但代码的可读性要高得多,因为不必在好几个地方添加媒体查询来处理我们的新变量,我只需在该组件的代码开头声明它们,并且无需担心是否已替换了正在使用的哪个值:
<前> :root { ,,,,包装:,1200 px; ,,,,:上校,1 fr; ,,,,地沟,20 px; ,,,@media (min-width: 1300 px), { ,,,,,,,,包装:,90%; ,,,,,,,,:上校,calc ((1000 px 作用;(13,*,40 px)),/, 12); ,,,,,,,,地沟,40像素; ,,,} ,,,@media (min-width: 1500 px), { ,,,,,,,,包装:,90%; ,,,,,,,,:上校,calc ((1200 px 作用;(13,*,50 px)),/, 12); ,,,,,,,,地沟,50 px; ,,,} } body { background - color,,,:,减轻(灰色,30%); } .wrapper { ,,,max-width:, var(包装); ,,,保证金:,20 px 汽车; } .grid { ,,,显示:,网格; ,,,填充:,var(——地沟); ,,,grid-template-columns:, 1 fr 重复(12日,var(——)上校),1 fr; ,,,grid-template-rows:,重复(2),极大极小(150 px,,汽车)); ,,,grid-gap:, var(——地沟); 边境:,,,,1 px solid 灰色; ,,,背景:,白色; ,,,宽度:,汽车; } .grid__item { 边境:,,,,1 px solid 蓝色; } .grid__item——heading { ,,,grid-column:, 2,/, 11; } .grid__item——body { ,,,grid-column:, 2,/, 8; ,,,行:,2,/,span 1; } .grid__item——media { ,,,背景:,hotPink; ,,,grid-column:, 11,/, 14; ,,,行:,1,/,span 2; }
