框模型的CSS自定义属性(变量) [英] CSS custom properties (variables) for box model

问题描述

我正在尝试为盒子模型属性设置CSS变量.我要支持为所有方面以及各个方面设置值.我想拥有默认值，但是无论哪种方式都可以覆盖. 我尝试使用后备值，但收效甚微.

I am trying to have CSS variables for box model properties. I want to support both setting a value for all sides as well as individual sides. I want to have default values, but be override-able either way. I tries using fallback values, but with little success.

类似的东西:

:root {
  --border-width-top: 0;
  --border-width-right: 0;
  --border-width-bottom: 0;
  --border-width-left: 0;
  --border-width: 0;
}
div {
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div {
  --border-width-top: 10px;
}

这将无法正常工作，就像border-width具有默认值一样，它将始终优先于后备值. 不确定目前有没有办法做到这一点，但是我觉得已经很接近找到解决方案了.

This will not work as if border-width has a default value then it will always take precedence over the fallback values. Not sure there is a way to do this currently, but I feel so close to finding a solution.

这是我正在玩的堆叠闪电战: stackblitz >

Here is a stackblitz I am playing with: stackblitz

推荐答案

您可以使用initial取消设置值以使用后备选项:

You can unset the value using initial to use the fallback one:

:root {
  --border-width-top: 2px;
  --border-width-right: 2px;
  --border-width-bottom: 2px;
  --border-width-left: 2px;
  --border-width: 0;
}
div {
  margin:5px;
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div.box {
  --border-width:initial;
  --border-width-top: 10px;
}

<div>some content</div>
<div class="box">some content</div>

来自规范:

自定义属性的初始值是空值；也就是说，什么都没有.此初始值与var()表示法具有特殊的交互作用，这在定义var()的部分中进行了说明.

The initial value of a custom property is an empty value; that is, nothing at all. This initial value has a special interaction with the var() notation, which is explained in the section defining var().

和

要 用属性值替换var() :

To substitute a var() in a property’s value:

1. 如果由var()的第一个参数命名的自定义属性 函数被动画污染，并且var()函数正在 动画属性或其惯用手之一，请对待自定义 属性具有该算法其余部分的初始值.
2. 如果由第一个参数命名的自定义属性的值 var()函数是除了初始值以外的任何东西，请替换var() 通过相应的自定义属性的值来实现功能.否则，
3. 如果var()函数具有后备值作为其第二个参数， 用后备值替换var()函数.如果有的话 后备版本中的var()引用，也可以替换它们.
4. 否则，包含var()函数的属性在以下位置无效 计算值时间

1. If the custom property named by the first argument to the var() function is animation-tainted, and the var() function is being used in the animation property or one of its longhands, treat the custom property as having its initial value for the rest of this algorithm.
2. If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property. Otherwise,
3. if the var() function has a fallback value as its second argument, replace the var() function by the fallback value. If there are any var() references in the fallback, substitute them as well.
4. Otherwise, the property containing the var() function is invalid at computed-value time

这篇关于框模型的CSS自定义属性(变量)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！