问题标签 [css-variables]

我有一个项目，其中包含一组 css 文件（每个反应组件一个）。我在 webpack 和 postcss-cssnext 中使用 css-loader（带有模块）。

理想情况下，我想要一个variables.css，这样我就可以在 css 文件中共享变量。我尝试过variables.css包含以下内容：

然后我将其导入，以便通过 css 加载程序。问题是，其他文件不接受这些变量，所以要么这不起作用，要么我做错了什么（包括在组件 css 文件中直接起作用）。

一个有效的方法是拥有一个styles.json具有以下 webpack 设置的文件：

主要问题是每次更改变量时都必须重新启动 webpack 开发服务器（因此重新加载 webpack 配置）。这并不理想。

那么，有什么更好的方法来做到这一点吗？

假设我有以下 CSS ：

我的标记是：

我的问题是上面的 CSS 是否转换为：

还是有额外的

如果没有变量，通用选择器对所有元素应用相同的 CSS。这是否会发生变化并且样式变得依赖于元素？

我还有一个问题是是否在 CSS 中:root转换为。body

这是一个 CodePen 演示：http ://codepen.io/anon/pen/RrvLJQ

我正在按照规范定义我的变量，如下所示：

并像这样访问它们：

哪个工作正常。

但是我想知道是否有一种方法可以调试或检查:rootCSS 规则以查看定义了哪些变量，以及它们的值是什么？

据我了解，:root选择器和html选择器都针对同一个元素，但是当我html使用 Chrome 的调试工具检查元素时，我看不到任何定义：

有没有办法找出已定义的变量及其值？

使用预处理器变量，很容易设置一个变量并对其进行操作，以便我可以使用它来设置多个属性。（演示）

在尝试使用原生 css 变量时，我注意到我可以将它们与预处理器变量结合起来，因此在以下示例中：（使用 firefox）

line-height 正确渲染为 40px

但是，当我试图操纵预处理器变量时 -像这样：

...代码失败。

这有可能吗？

如何var(…)使用 JavaScript（plain 或 jQuery）获取和设置 CSS 自定义属性（在样式表中访问的属性）？

这是我不成功的尝试：单击按钮会更改通常的font-weight属性，但不会更改自定义--mycolor属性：

我知道我可以使用框架（http://lesscss.org）来实现这一点，但我想知道纯 CSS 是否会随时支持这一点？

我正在使用聚合物，我认为这是一个但我不完全确定。

在我的主要文件中，我有这个：

在我的子元素里面我有这个样式块

一切都很好。但是在我的父元素中，我有：

我的子元素获得 5px 实心 #000，但不是 #f30 背景颜色。

难道我做错了什么？这是一个已知的错误？

我很好奇在设置 CSS 变量时使用 calc() 的行为。

例子：

现在，如果#test元素 adiv是 500px 宽，我希望将--halfWidth变量设置为 250px。

但是，据我所知，var(--halfWidth)其他地方使用的代码只是放在calc(100% / 2)字符串中而不是250px. 这意味着我不能使用元素 A 的计算并稍后在元素 B 中使用它，因为它会简单地设置为例如width: var(--halfWidth);元素 B 的宽度的一半而不是元素 A 的宽度的一半，其中变量是定义。

我已经在网上搜寻了有关此行为的任何文档，但到目前为止我还是一片空白。

理想情况下，使用 calc 设置 CSS 变量应该有两种变体：

1. 一个变体就像这个例子一样工作，只是按原样放入字符串，禁止任何字符串内变量替换。
2. 第二个变体，其中 calc() 将产生计算结果，而不是简单地替换字符串。

如何做到这一点？我宁愿把实际的实现留给适合它的人，但一种可能性是eval()一种事情；喜欢eval(calc(100% / 2))会给结果250px。

无论如何，如果有人有任何关于这种行为的真实文档或如何让上面的示例产生结果的解决方案，我会全神贯注！

编辑：仅供参考，我已阅读https ://drafts.c​​sswg.org/css-variables/ 上的规范

如何在 CSS 变量的后备值中使用逗号？

例如，这很好：var(--color, #f00)，但这很奇怪var(--font-body, Verdana, sans-serif)。

这个想法是能够font-family使用具有后备值 say 的变量来设置 a Verdana, sans-serif。

编辑：这实际上对于支持 CSS 属性的浏览器非常有效，但问题似乎来自 Google Polymer 的 polyfills。

为了将来参考，我最终像这样对字体和字体系列后备使用了变量（目前似乎是最干净的方法）：

有什么方法可以检测浏览器是否支持CSS 自定义属性（例如。color: var(--primary)）？

我需要编写一个脚本，该脚本在不支持自定义属性的浏览器中的行为略有不同，但我找不到任何记录的Modernizr测试，也找不到有关用于访问自定义属性的 Javascript 接口的任何信息。

将不胜感激任何建议！