CSS自定义属性+CSS Grid网格实现超级的布局能力

最近我还注意到的一件事就是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;}