使用 CSS 自定义属性来减小 CSS 文件的大小
AWS 安全直播！
与 SASS 变量不同，CSS 自定义属性可以在类选择器中进行修改，从而创建抽象并减小 CSS 的大小。
我给你举个例子！
这里有一个简短的视频教程。如果您更喜欢阅读文章，请跳到此部分。
在CodyHouse 框架中，我们使用.grid-gap-{size}实用程序类来设置网格项之间的间距：
.grid {
display: flex;
flex-wrap: wrap;
> * {
flex-basis: 100%;
}
}
.grid-gap-xxxs {
margin-bottom: calc(-1 * var(--space-xxxs));
margin-left: calc(-1 * var(--space-xxxs));
> * {
margin-bottom: var(--space-xxxs);
margin-left: calc(var(--space-xxxs));
}
}
.grid-gap-xxs {
margin-bottom: calc(-1 * var(--space-xxs));
margin-left: calc(-1 * var(--space-xxs));
> * {
margin-bottom: var(--space-xxs);
margin-left: calc(var(--space-xxs));
}
}
.grid-gap-xs {
margin-bottom: calc(-1 * var(--space-xs));
margin-left: calc(-1 * var(--space-xs));
> * {
margin-bottom: var(--space-xs);
margin-left: calc(var(--space-xs));
}
}
.grid-gap-sm {
margin-bottom: calc(-1 * var(--space-sm));
margin-left: calc(-1 * var(--space-sm));
> * {
margin-bottom: var(--space-sm);
margin-left: calc(var(--space-sm));
}
}
.grid-gap-md {
margin-bottom: calc(-1 * var(--space-md));
margin-left: calc(-1 * var(--space-md));
> * {
margin-bottom: var(--space-md);
margin-left: calc(var(--space-md));
}
}
.grid-gap-lg {
margin-bottom: calc(-1 * var(--space-lg));
margin-left: calc(-1 * var(--space-lg));
> * {
margin-bottom: var(--space-lg);
margin-left: calc(var(--space-lg));
}
}
.grid-gap-xl {
margin-bottom: calc(-1 * var(--space-xl));
margin-left: calc(-1 * var(--space-xl));
> * {
margin-bottom: var(--space-xl);
margin-left: calc(var(--space-xl));
}
}
.grid-gap-xxl {
margin-bottom: calc(-1 * var(--space-xxl));
margin-left: calc(-1 * var(--space-xxl));
> * {
margin-bottom: var(--space-xxl);
margin-left: calc(var(--space-xxl));
}
}
.grid-gap-xxxl {
margin-bottom: calc(-1 * var(--space-xxxl));
margin-left: calc(-1 * var(--space-xxxl));
> * {
margin-bottom: var(--space-xxxl);
margin-left: calc(var(--space-xxxl));
}
}
由于重复内容很多，几周前，我们决定使用 CSS 自定义属性来简化这些类。
第一步是创建一个抽象层，其中包含我们为每个实用程序类重复编写的代码：
[class*="grid-gap"] {
margin-bottom: calc(-1 * var(--grid-gap, 1em));
margin-left: calc(-1 * var(--grid-gap, 1em));
> * {
margin-bottom: var(--grid-gap, 1em);
margin-left: var(--grid-gap, 1em);
}
}
此属性选择器查找包含字符串“grid-gap”的类（所有 grid-gap 实用程序类）。请注意，我们已将变量替换--space-unit为新--grid-gap变量。
在我们的.grid课堂上，我们将--grid-gap变量设置为 0（默认值）。
.grid {
--grid-gap: 0px;
display: flex;
flex-wrap: wrap;
> * {
flex-basis: 100%;
}
}
现在我们可以对.grid-gap-xxxxs类进行如下修改：
.grid-gap-xxxxs { --grid-gap: var(--space-xxxxs); }
我们不再需要关于边距的那一大段代码了；我们可以直接修改--grid-gap变量的值。
如果我们对所有实用程序类执行相同的操作，最终会得到以下结果：
.grid {
--grid-gap: 0px;
display: flex;
flex-wrap: wrap;
> * {
flex-basis: 100%;
}
}
[class*="grid-gap"] {
margin-bottom: calc(-1 * var(--grid-gap, 1em));
margin-left: calc(-1 * var(--grid-gap, 1em));
> * {
margin-bottom: var(--grid-gap, 1em);
margin-left: var(--grid-gap, 1em);
}
}
.grid-gap-xxxxs { --grid-gap: var(--space-xxxxs); }
.grid-gap-xxxs { --grid-gap: var(--space-xxxs); }
.grid-gap-xxs { --grid-gap: var(--space-xxs); }
.grid-gap-xs { --grid-gap: var(--space-xs); }
.grid-gap-sm { --grid-gap: var(--space-sm); }
.grid-gap-md { --grid-gap: var(--space-md); }
.grid-gap-lg { --grid-gap: var(--space-lg); }
.grid-gap-xl { --grid-gap: var(--space-xl); }
.grid-gap-xxl { --grid-gap: var(--space-xxl); }
.grid-gap-xxxl { --grid-gap: var(--space-xxxl); }
.grid-gap-xxxxl { --grid-gap: var(--space-xxxxl); }
这种优化方法使示例 CSS 代码的大小减少了一半以上！显然，只有在可以抽象某些规则的情况下才能应用这种技巧（我并不是说 CSS 自定义属性就能使 CSS 代码的大小减少一半）。不过，本教程仍然只是一个利用 CSS 变量进行代码优化的示例。
附注：所有现代浏览器都支持 CSS 变量。
原文发表于CodyHouse.co
文章来源：https://dev.to/codyhouse/using-css-custom-properties-to-reduce-the-size-of-your-css-4npc