根据 MDN，该var函数接受多个后备。但我无法让他们工作。
我在 Chrome、Firefox 和 Safari 上尝试了以下代码。for在上述所有浏览器上都是透明的background-color。.demo3
是代码错误，还是浏览器没有实现变量回退？
:root {
--my-var: red;
}
.demo1 {
background-color: var(--my-var);
}
.demo2 {
background-color: var(--my-background, pink);
}
.demo3 {
background-color: var(--my-background, --my-var, pink);
}<div class="demo1">No fallback</div>
<div class="demo2">Single fallback</div>
<div class="demo3">Multiple fallbacks</div>我的问题是为什么 CSS 变量需要添加回退的概念，而不是像其他 CSS 属性一样依赖继承。
例如：
:root {
--color1: red;
}
body {
color: var(--color1);
}
body p {
color: var(--color2);
--color2: blue;
}
body span {
--color3: green;
color: var(--color3);
color: yellow;
color: var(--color4);
}<body>
Text 1
<p>
Text 2
</p>
<span>
Text 3
</span>
</body>文本 3 最终变成红色而不是绿色或黄色。尽管级别上存在有效属性，但它采用父颜色值，而不是验证同一级别上是否还有其他有效值。当变量名称无效时会发生这种情况。
显然，CSS 变量有一个特殊的回退，因此您需要使用以下内容：
color: var(--color4, yellow);
但这又意味着颜色的重复，因为
color: var(--color4, --color3);
不起作用。既不是：
color: var(--color3, yellow, blue);
或任何其他多个值。
也不支持像inherit、currentColor、initial等关键字。所以我不确定如何依赖继承，因为显然我需要对给定的值非常明确。在 Firefox 57.0.1 和 Chrome 63 上测试。
我知道 …
请查看Stackblitz或下面的代码
存在以下问题：来自 :root 的变量未设置为元素。但是当我重命名:root => .component时。它按预期工作。显示该框。
为什么 :root 变量没有设置？它们不是全局性的还是特异性问题？
提前致谢。
社会保障体系：
:host {
display: block;
}
:root {
--profile-picture-size-w: 9rem;
--profile-picture-size-h: 9rem;
--profile-picture-border: 1px solid #1e96a9;
--profile-box-backgound-size: cover;
--profile-box-p: 20px 0;
--article-dateInfo: 3px;
}
.component{
height: 500px;
background: lightgray;
#main_content {
.scrollbarContent{
article#profile {
.profileBox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--profile-box-p);
.profilePicture {
position: relative;
width: var(--profile-picture-size-w);
height: var(--profile-picture-size-h);
background: cyan;
}
}
}
}
}
}
@media all and (min-width: …我想结合 CSS 变量和 calc()，但就像之前在这个线程中提到的那样（没有精确的答案），如果你做以下事情似乎有问题：
--a: 1;
--b: 2;
--result: calc(var(--a) + var(--b));
这个例子的输出当然应该是 3，但是如果你使用 var(--result) 它只有值 var(calc(1 + 2))。
注意：我不想使用预处理器（如 sess 或 lass），只想使用原生 CSS。
所以我的问题是：在 var(--result) 中使用结果之前，您能否以某种方式强制执行 calc() 函数？
提前致谢！
让我们假设有以下 CSS：
.box {
width: var(--box-size);
height: var(--box-size);
border: 1px solid red;
}
.box--larger {
--box-size: 66px;
}
.box--larger1 {
--box-size: calc(var(--box-size) + var(--box--larger));
}
.box--larger2 {
--box-size: calc(50px + var(--box--larger));
}
:root {
--box-size: 50px;
--box--larger: 16px;
}<div class="box">1</div>
<div class="box box--larger">2</div>
<div class="box box--larger1">3</div>
<div class="box box--larger2">4</div>我想知道为什么框 1 和框 2 有效而框 3 不起作用。我希望框 3 看起来与框 2 相同，但事实并非如此。我在 Chrome 中测试了 box 3 的方法，我发现var(--box-size)它没有显示值但var(--box-larger)确实返回了正确的值（16px）。
有人可以解释为什么框 3 的方法不起作用。我的意思是对我来说它看起来像有效的 CSS。
我有以下 CodePen: Test LCD with CSS Variables，在其中单击具有特定数字的标签时，会根据我确定模拟 BCD 到 7 段显示解码器的代数方程使适当的 LCD 段“点亮” ，为了模拟液晶显示器...
我目前有 CSS 中提到的第一段方程。单击 CSS 中的一个数字理论上应该会导致--input用脉冲（0 或 1）填充适当的四个变量，然后该等式根据该段的等式确定不透明度...
段 A（顶部段）应更改如下：
其中“on”的不透明度为 1，“off”的不透明度为 0.05。
然而，即使我们的初始默认值为 0（开启），点击比如说 1 或 4，也不会改变段不透明度......
代码如下，谁能指出我可能做错了什么？提前谢谢了...
HTML：
<div id="led-screen">
<div class="digit">
<div class="segment segment-a"></div>
<div class="segment segment-b"></div>
<div class="segment segment-c"></div>
<div class="segment segment-d"></div>
<div class="segment segment-e"></div>
<div class="segment segment-f"></div>
<div class="segment segment-g"></div>
</div>
</div>
<div id="buttons">
<label class="digit-button" for="digit-7">7</label>
<label class="digit-button" …我正在通过 Atom 上的 W3C CSS 验证包传递我的 .css 文件，它实际上向我为练习而创建的所有变量提供了“解析错误”消息。下面是 :root 伪类的开头（但所有剩余的变量声明都同样有问题）
我已经尝试从头开始重写它们，替换它们或更改值只是为了检查行为，但没有任何改变。
:root {
--primary-color: #781820;
--secondary-color: #ABABAB;
--tertiary-color: #cead00;
--backup-color: #FAFAFA;
...
除了修复错误之外，我想了解它们的谎言以更好地理解该过程。
I have an issue with CSS variable (defined using var() syntax) with !important flag disappearing when Angular project is build in production mode (using ng build --prod). Specifically, in my scss file I have something like this:
.all-borders {
border: 3px solid var(--primary) !important;
// in "development" build this is correctly compiled to: "border:1px solid var(--primary)!important"
// in "production" build this is incorrectly compiled to: "border:1px solid!important"
}
.window {
height: 100px;
width: 100px;
background-color: cadetblue;
}
and in …
我想定义几个线性渐变并仅使用 CSS 规则应用它们：我试过这个：
console.log(
window
.getComputedStyle(document.querySelector('body'))
.getPropertyValue('--btnPrimary')
);:root{
--primary: #4169e1;
--secondary :#ef3c3a;
--grey: #585f74;
--g-light: #b6bbc8;
--p2s-3: #c44764;
--s2p-3: var(--p2s-1);
--p-btngrad-a: var(--primary);
--p-btngrad-b: var(--p2s-3);
--lgrad-angle: 75;
--lgrad-stop-a: 45;
--lgrad-stop-b: 99;
--btnPrimary: linear-gradient(
var(--lgrad-angle)deg,
var(--p-btngrad-a) var(--lgrad-stop-a)%,
var(--p-btngrad-b) var(--lgrad-stop-b)%
);
--btnSecondary: linear-gradient(
var(--lgrad-angle)deg,
var(--s-btngrad-a) var(--lgrad-stop-a)%,
var(--s-btngrad-b) var(--lgrad-stop-b)%
);
}
div.demo{
height:200px;
width:200px;
background:var(--btnPrimary);
}
div.demo:hover{
background:var(--btnSecondary);
}<h1>css only linear gradient by parameters</h1>
<div class="demo">hover me</div>但它不起作用。控制台显示原因：
linear-gradient(75/**/deg, #4169e1 45/**/%, #c44764 99/**/% )
为什么 CSS 变量后跟注释标记（“/**/”）？
我怎样才能解决这个问题？
标题说明了一切。
我想知道，这是我在calc()算术中可以在 CSS 中使用的最大数字。
它与 JavaScript 中的最大数字相同吗？
当我尝试使用转换时，限制似乎是 1e39（在 Chrome 和 for 中transform: translateX()）
div span {
display: block;
width: 100px;
height: 100px;
background-color: gold;
}
div:nth-child(1) span {
-webkit-transform: translatex(calc(1e38px * 1e-37));
transform: translatex(calc(1e38px * 1e-37));
}
div:nth-child(2) span {
-webkit-transform: translatex(calc(1e39px * 1e-37));
transform: translatex(calc(1e39px * 1e-37));
}
div:nth-child(3) span {
-webkit-transform: translatex(calc(1e40px * 1e-37));
transform: translatex(calc(1e40px * 1e-37));
}<div>
<code>transform: translatex(calc(1e38px * 1e-37));</code>
<span></span>
</div>
<div>
<code>transform: translatex(calc(1e39px * 1e-37));</code>
<span></span>
</div> …