是否可以处理 CSS 变量？

Question

我的代码有一个 CSS 变量，我们称它为 --element-padding，它允许多个值，例如8px 0 12px 79px ，这个变量在我拥有的一个 web 组件中，它被第三方使用。

我在我的网络组件中使用它 CSS

padding: var(--element-padding, '0');

这个变量允许我的用户在设置我的组件样式时覆盖声明它的填充

.awesome-component {
   --element-padding: 8px 0 12px 79px;
}

现在我发现我需要处理它，因为我只需要另一种样式的 padding-top。

一种选择是将 --element-padding 更改为 4 个不同的变量

--element-padding-top
--element-padding-right
--element-padding-bottom
--element-padding-left

但是，用户将不得不更改他们的代码以适应新的变量，从而造成很多麻烦。

在 var() CSS function 中使用它之前，有什么方法可以获取此变量并进行某种拆分计算？ 这样我就可以获得变量的第一个 position，而无需告诉用户更改其实现。

（代码和解释是一个简化的，不适应实际情况，但重点是将包含 4 个度量的变量拆分为 4 个不同的变量，而无需在用户端/根目录中添加/修改变量）

Answer 1

原答案在底部

我想我明白你想让你的消费者继续使用--element-padding CSS 变量并且你想从中派生出单独的 top/right/bottom/left 值，他们可以自定义--element-padding但你将在您今后的开发中使用各个属性。

可以读取 CSS 个变量：

getComputedStyle(document.documentElement).getPropertyValue('--element-padding')

并设置它们：

document.documentElement.style.setProperty('--element-padding-top', '8px')

把它们放在一起：

 const updatePadding = () => { let elementPadding = getComputedStyle(document.documentElement).getPropertyValue('--element-padding'); // "8px 0 12px 79px"; let [top, right, bottom, left] = elementPadding.trim().split(/\s+/); const docStyle = document.documentElement.style; docStyle.setProperty('--element-padding-top', top); docStyle.setProperty('--element-padding-right', right); docStyle.setProperty('--element-padding-bottom', bottom); docStyle.setProperty('--element-padding-left', left); }; updatePadding();

 :root { --element-padding: 8px 0 12px 79px; /* Default values but will overridden by updatePadding() */ --element-padding-top: 8px; --element-padding-right: 0; --element-padding-bottom: 12px; --element-padding-left: 79px; }

原始答案

你应该反过来想。 而不是拆分--element-padding为什么不声明各个变量然后使用它们来创建一体式 CSS 变量。

::root {
  --element-padding-top: 8px;
  --element-padding-right: 0;
  --element-padding-bottom: 12px;
  --element-padding-left: 79px;
  --element-padding: var(--element-padding-top) var(--element-padding-right) var(--element-padding-bottom) var(--element-padding-left);
}

您仍然可以像以前一样使用原始变量。

  padding: var(--element-padding, '0');

Answer 2

这里要注意的关键是CSS 自定义属性可能引用其他CSS 自定义属性：

例子：

:root {
  --element-padding-top: 8px;
  --element-padding: var(--element-padding-top) 0 12px 79px;
}

 .element1 {
   padding: var(--element-padding, '0');
 }

 .element2 {
   padding-top: var(--element-padding-top);
 }

Answer 3

您可以使用默认值。 如果那些使用你的组件的人没有设置值，没什么大不了的，但如果他们愿意的话，你给了他们声明它们的机会。

:host {
  --element-padding: 20px;

  padding:
     var(--element-padding-top,    var(--element-padding))
     var(--element-padding-right,  var(--element-padding))
     var(--element-padding-bottom, var(--element-padding))
     var(--element-padding-left,   var(--element-padding));
}

缺点是他们可能无法将填充声明为一组数字。