css 网格布局_具有CSS变量+ CSS网格的超强布局

我们在Mud的生产环境中使用CSS Grid已有几个月了，我绝对喜欢它为布局编码提供的灵活性。 长期以来，我们一直没有一个真正的Web布局解决方案-用float和flexbox对其进行破解只是我们做事的方式。 但是现在，老实说，我无法想象没有网格的生活！

最近才引起我充分注意的一件事是CSS变量 （或“自定义属性”）。 CSS变量的工作方式与Sass和其他预处理器中的变量类似。 主要区别在于它们是在浏览器中编译的，这与预处理器变量不同，预处理器变量在到达浏览器之前被编译为固定CSS值。 CSS变量是真正的动态变量，可以在样式表中或使用JavaScript即时更新。 如果您熟悉Javascript，我会认为预处理器变量和CSS变量之间的区别类似于const和let之间的区别-它们两者都有不同的用途。

CSS变量可以包含许多有用的应用程序（例如主题化）。 我最近一直在考虑使用CSS变量的一种方法是在使用CSS Grid的布局中，我需要在不同的断点处重新定义grid-template-rows和grid-template-columns属性。 这是下面一支笔的示例，其中我使用了Sass变量来定义我的小列和大列宽度，并将其传递给grid-template-rows属性。 我对grid-gap属性进行了相同的操作，因此每个中断点的装订线都增大了：

演示地址

如您所见，我基本上必须在媒体查询中再次写出整个代码块，以传递第二个变量，因为变量一旦定义就固定了。 （我当然可以使用mixin，但是最终效果是相同的-更大的代码块。）

使用CSS变量，我可以减少代码量，因为我可以简单地在媒体查询中更新变量，然后浏览器重新计算网格。 十行（Sass）代码可能看起来并不节省很多，但是代码更具可读性-不必在多个位置添加媒体查询来处理我们的新变量，我只需在代码开头就声明它们该组件的代码，而不必担心确保已在使用它的地方替换了每个值：

演示地址

我发现使用CSS Grid的一件事是语法非常冗长，而且要快速，轻松地准确了解正在发生的事情并不总是那么简单，尤其是在复杂的网格中。 但是在此示例中，使用CSS变量可以为Grid项的大小和坐标设置变量，并且只写一次grid-column和grid-row属性。 对我来说，这比每次都写出完整的属性要清晰得多，而且一目了然，我们可以在其中放置任何网格项。

演示地址

当我们将JavaScript添加到组合中时，事情变得更加有趣！ 在上面的示例中，每次单击按钮时，我使用JavaScript遍历网格项并使用随机值（在我们的网格参数内）更新变量。 无需添加类或额外CSS！ （请注意，这是一个进行中的概念验证，请不要评判我的JS;））

在下面的示例中，我使用用户输入来动态更改我们的网格项。 这里要更新的是x和y坐标的三个变量以及网格项目的大小。

见笔CSS变量+ CSS网格实验（在建），米歇尔·巴克（ @michellebarker ）上CodePen 。

如此多的可能性！

浏览器支持

目前，全球88％的浏览器均支持CSS变量-Internet Explorer 11及以下版本是明显的例外。 这与对Grid Layout的支持大致相同，这意味着使用功能查询测试支持是否相当简单。

您可以使用这样的@supports声明来测试对CSS变量的支持：

@supports(--css: variables) {
		.my-div {
			--size: 2;
			--posX: 3;
			grid-column: var('--posX') / span var('--size');
		}
	}

（请参阅SitePoint的此示例笔 ）

我希望这能使您对CSS变量的功能有所了解！

翻译自: https://css-irl.info/super-powered-layouts/