我在工作中使用CSSGrid已经几个月了，我非常喜欢它在页面布局上给我带来的灵活性。很长时间以来我们都没有真正的网格布局解决方案——浮动和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;$装订线：20px；$wrapper-l:90%;$col-l:计算((1000px-(13*40px))/12);$gutter-l:40px;$col-xl:计算((1200px-(13*50px))/12);$gutter-xl:50px;body{background-color:lighten(grey,30%);}.wrapper{max-width:$wrapper;边距：20px自动；@media(最小宽度:1300px){最大宽度:$wrapper-l;}}.grid{显示：网格；填充：$装订线；网格模板列：1fr重复（12，$col）1fr；grid-template-rows:repeat(2,minmax(150px,auto));网格间隙：$gutter；边框：1px纯灰色；背景：白色；宽度：自动；@media(min-width:1300px){grid-template-columns:1frrepeat(12,$col-l)1fr;网格间隙：$gutter-l；填充：$col-l；}@media(min-width:1500px){grid-template-columns:1frrepeat(12,$col-xl)1fr;网格间隙：$gutter-xl；填充：$col-xl；}}.grid__item{border:1pxsolidblue;}.grid__item--heading{grid-column:2/11;}点击查看上图完整代码和实时效果。如您所见，您基本上必须在媒体查询整个代码块中再次编写它以更改样式，因为变量一旦定义就固定了（我当然可以使用混合，但最终结果是相同的-一个大块代码。）使用CSS自定义属性，代码量减少了，因为我只需要更新媒体查询中的变量，浏览器就会重新计算网格。十行(sass)代码可能看起来不是一个巨大的节省，但代码更具可读性，因为我不必在几个地方添加媒体查询来处理我们的新变量，我可以只在开头添加Declare它们，并且不需要担心你是否替换了你正在使用的值：:root{--wrapper:1200px;--col:1fr;--装订线：20px；@media(min-width:1300px){--包装:90%;--col:计算((1000px-(13*40px))/12);--装订线：40px；}@media(min-width:1500px){--wrapper:90%;--col:计算((1200px-(13*50px))/12);--装订线：50px；}}body{background-color:lighten(grey,30%);}.wrapper{max-width:var(--wrapper);margin:20pxauto;}.grid{display:grid;填充：var(--gutter);网格模板列：1fr重复（12，var（--col））1fr；grid-template-rows:repeat(2,minmax(150px,auto));网格间隙：var(--gutter)；边框：1px纯灰色；背景：白色；width:auto;}.grid__item{border:1pxsolidblue;}.grid__item--heading{grid-column:2/11;}.grid__item--body{grid-column:2/8;网格行：2/跨度1;}.grid__item--media{背景：hotPink;网格列：11/14；grid-row:1/span2;}点击查看全部代码和实时效果我发现使用CSSGrid的一个特点是语法非常Verbose，而且不容易快速看到具体情况很容易，尤其是在复杂的网格中。但是在这个例子中，使用CSS自定义属性，可以为griditem的大小和坐标设置变量，并且只写一次grid-column和grid-row属性。对我来说，这比每次都写出完整的属性要清楚得多，而且很容易一目了然地看到网格项在哪里。这是一个随机动态更改自定义变量的DEMO，在此示例中，我使用javascript循环遍历网格项，并在每次单击按钮时使用随机值更新变量。没有添加类或额外的CSS。在此示例DEMO中，网格项会根据用户输入的值动态更改。这里需要更新的是x和y坐标的三个变量以及网格项的大小。这么多的可能性！浏览器支持CSS自定义属性目前受全球88%的浏览器支持-InternetExplorer11及以下版本是明显的例外。这与对CSSGrid布局的支持大致相同，这意味着使用功能查询来区分支持和不支持的浏览器。您可以使用@supports声明来测试对css自定义属性的支持：@supports(--css:variables){.my-div{--size:2;--posX:3;网格列：var('--posX')/spanvar('--size');}}
