简介
@avalanche/setting-spacings 是一个简单易用的 npm 包，用于管理前端项目中的间距（spacing）。它提供了一套标准的间距值，方便项目中的所有开发人员在设计和开发中进行统一，减少了样式冲突的可能性，提高团队协作效率。
安装
npm install @avalanche/setting-spacings
使用
引入间距值
-- -------------------- ---- ------- ------ - -------- - ---- ------------------------------ ---------------------- -- - -- ------------ -- -- ------------ ------ -- ------------ ------ -- ------------ ------- -- ------------ ------- -- ------------ ------- -- ------------ ------- -- ------------ ------- -- ------------ ------- -- ------------ ------- -- ------------- ------ -- -
使用间距值
div {
padding: var(--spacing-2);
margin-top: var(--spacing-3);
}深入理解
使用 @avalanche/setting-spacings 的原理是在 CSS 中使用自定义属性（Custom Properties / CSS 变量）来引用间距值。定义一个自定义属性的语法如下：
--spacing-1: 4px;
这表示定义了一个名为 --spacing-1 的属性，它的值为 4px。
引用一个自定义属性的方式是使用 var() 函数，语法如下：
padding: var(--spacing-1);
这表示使用了名为 --spacing-1 的属性的值作为 padding 的值。
@avalanche/setting-spacings 定义了一套标准的间距值，使用者可以通过如下方式引用：
padding: var(--spacing-2);
实际应用
在实际的前端项目中，我们通常需要定义一些符合设计规范的样式，这些样式可能被多个组件或页面使用到，因此如果每个组件或页面都重复定义一遍样式，就会非常冗余。
例如我们要定义一种按钮的样式：
-- -------------------- ---- ------- ---- - -------- ------------- -------- --- ----- ---------- ----- ------------ ----- ----------- ------- ------ ------ ----------------- ----- ------- ----- -------------- ---- - ---------- - ----------------- --------- -
这是一个常见的按钮样式，它定义了按钮的基本属性和鼠标悬停时的样式。如果我们要在多个页面或组件中使用这个样式，就需要复制粘贴多次，非常冗余。
使用 @avalanche/setting-spacings 后，我们可以将样式中用到的间距值替换为自定义属性，例如：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ---------------- ----------------- ---------- ----- ------------ ----- ----------- ------- ------ ------ ----------------- ----- ------- ----- -------------- ----------------- - ---------- - ----------------- --------- -
这样我们就可以将这个样式抽象出来，作为一个全局样式来使用。如果我们需要修改其中一个间距值，只需要修改 @avalanche/setting-spacings 定义的值，整个项目中所有使用到该间距值的样式都会自动更新。
总结
@avalanche/setting-spacings 提供了一种方便管理前端项目中间距的方法。通过引用自定义属性，我们可以将样式中的间距值抽象出来，并统一管理，避免了样式冲突和重复定义的问题。在实际的前端项目中，我们可以将一些通用的样式以此方式定义为全局样式来使用，提高效率，减少冗余。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcaa5b5cbfe1ea0612473