将自定义属性设置为 的值与inherit您对其他所有 CSS 属性的期望完全一样：它继承其父级的相同属性值。

正常的属性继承：

自定义属性继承（显式）：

自定义属性继承（隐式）：

border默认情况下继承所有自定义属性（与 不同）

我的问题

当您希望其值实际计算到关键字时，如何将其设置为自定义属性的文字值？inheritinherit

在此示例中，我希望第二个figcaption（悬停时）继承其父级的红色边框，因此我设置--foobar为inherit. 但是，如示例 2 所示，这不会计算为，而是计算为从父属性（如果有的话）inherit继承的值，在本例中为绿色。--foobar

我完全理解 CSS 作者为什么这样设计它：--foobar就像任何其他 CSS 属性一样，所以设置inherit应该继承它的值。所以我想我在问是否有一种解决方法可以让第二个figcaption继承其父级的边界。

注意，我考虑过

但这违背了使用 CSS 变量的目的。

如果有许多其他属性figure > figcaption都使用 value var(--foobar)，我不想为悬停场景重新定义它们。我宁愿只设置一次这些属性，然后根据上下文重新分配变量。

I have the following code:

This doesn't work because --text is inserted as-is and produces content: success (no quotes).

Obviously I can do --text: 'success', but not always — if variable is reused between several properties, quotes would not be appropriate for some of those.

Is it possible to add the quotes in content itself? Something like

would be perfect.

我有一个定义为 CSS 变量的调色板。

元素的 CSS 类正在使用这些变量。

不同的类使用不同的变量。我需要做的是分析渲染页面上的某个元素，并告诉它在其样式中使用了哪些 CSS 变量。例如：div#article-body使用变量background-normal和text-normal.

我可以通过 using 获取元素的计算样式，getComputedStyle但返回的样式将所有 CSS 变量替换为实际值。

关于如何提取带有变量名的 CSS 的任何想法？

我正在设计一个电子应用程序，所以我可以访问 CSS 变量。我在以下位置定义了一个颜色变量vars.css：

我想在 中使用这种颜色main.css，但应用了一些不透明度：

我该怎么做呢？我没有使用任何预处理器，只有 CSS。我更喜欢全 CSS 的答案，但我会接受 JavaScript/jQuery。

我不能使用opacity，因为我使用的背景图像不应该是透明的。

示例使用（我想要的）

显示它不起作用的测试用例：

CodePen：Jase Smith 的 Pseudo Element 的“content:”属性（一个测试用例）中的 CSS 变量

我了解如何在 CSS 中使用变量。他们帮助我加快了客户网站的工作流程。

我注意到不止一次我会写下带有数字的变量，以分配给特定的颜色或外观，因为没有阵列系统到位。可以这么说，我最终创建了一个准数组。

像这样

有可能在 CSS 中做这样的事情吗？

然后调用数组

代替

我知道 CSS 不是 OOP，但是能够处理这样的数据会很好，特别是如果我可以将它扩展到二维。我也明白这在理论上可能是一个毫无意义的练习，因为键入 --c3 比执行 --c,3 甚至 --c[3] 更快。深思熟虑。

我想像在 Sass 中一样定义 CSS 变量。就像是：

我想在我的班级或 json 文件中定义 $imageLink 和 $someColor 。

我可以在没有 Sass 或 Less 的情况下做到这一点吗？（或者没有 css 变量，因为它在 IE 中不支持。）

我在我的项目中使用了 angular2 和 webpack。

我试图找出一种使变量为负数的方法。我尝试right: calc(0-var(--skyve-bredde));了一下它没有用。这是变量：

该值将用于right和width属性。任何帮助表示赞赏，谢谢。

我正在测试一个通过微类指定数字的 CSS 框架。例如，类似的东西<div class="fifty percent wide">可能会翻译成width: 50%. 该实现使用 CSS 变量（自定义属性）。

考虑以下 CSS：

这一切都很好，效果很好。问题是我想编写一个测试套件，该套件将验证fifty percent结果是否--percent为50%. 不幸的是，如果我getComputedStyle用来检查 的值--percent，我会看到整个（未解析的、未计算的）“calc”字符串。如果我检查 的值width，我会得到已经解析的值，例如“512px”。

有没有办法以编程方式获取和验证自定义 CSS 属性的已解析计算值？还是一个 API 来强制评估“calc”表达式？

我创建了一个名为my-mixins.html包含的文件：

然后我创建一个元素my-element.html：

虽然--red工作（正如它应该做的那样），.green但没有。我意识到这是为了确保样式不会溢出等。但是......这里的实际规则是什么？为什么--red设置它并且它对模块可用，而green不是？