问题标签 [css-variables]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - CSS 自定义属性在链接的 CSS 文档中是全局的吗？
我正在尝试使用 CSS3 自定义属性（又名 CSS 变量）取得很大成功。我说的是--black: #000;和background: var(--black);类型变量。但是，当变量在单独的链接文档中声明时，我没有运气。
由于 CSS 自定义属性的浏览器兼容性超过 72%（来源：https ://caniuse.com/#search=css%20variables ），我很想在我知道我的受众正在使用的非常具体的应用程序中开始使用它们兼容的浏览器。
我想知道这些 CSS 自定义属性是否在所有链接的 CSS 文档的范围内都是全局的，或者它们是否只是:root每个文档的全局（在元素处）？
我无法找到答案（即使在规范中）！
我读到的一些研究：
- https://drafts.csswg.org/css-variables/#defining-variables
- http://www.javascriptkit.com/dhtmltutors/css-variables-tutorial.shtml
- https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties
- https://css-tricks.com/css-custom-properties-theming
- https://www.sitepoint.com/practical-guide-css-variables-custom-properties
- https://www.toptal.com/front-end/dynamic-css-with-custom-properties
- https://googlechrome.github.io/samples/css-custom-properties/
- https://tympanus.net/codrops/css_reference/custom-properties/
我的具体问题发生在 Ruby on Rails 应用程序中，我将 CSS 自定义属性包含在<style>SCSS 样式表之前的块中，包括在部署时将被预编译。如果我在 SCSS 的顶部包含变量，一切正常。然而，该<style>块包含主题变量，需要在运行时由 ERB 编译。
css - 使用变量时如何防止CSS覆盖以前的值
所以，我正在尝试设计一个样式表，为我们提供快速简便的自定义选项（一些团队成员对 CSS 的理解有限，构建一个可以轻松编辑的“主题表”会更安全）
我在 :root 中声明我的变量并稍后在 css 文件中使用它们，但我观察到如果 css 找不到变量，它会恢复为默认值，而不是使用之前在 CSS 中提供的值。
我目前将其设置为继承以解决此问题，但这仍然从其父容器中提取值，并且网页已经选择了默认主题，如果我们继承，它通常会破坏它们。
我最终的解决方案是注释掉除正在使用的变量之外的所有变量。这允许我在 var() 的第二个字段中指定一个默认值，除非该变量确实存在，否则它将始终默认为该值。这不是我的目标，但我相信它是基本 CSS 范围内的唯一解决方案。
javascript - 列出 CSS 自定义属性（CSS 变量）
我在样式表中设置了一些 CSS 自定义属性：
如果我已经知道 CSS 变量的名称，我可以单独检索它们，如下所示：
但是如果我想拉出一个 CSS 变量列表和它们的值，那该怎么做呢？
css - css 变量 - 如果尚未定义，则声明变量
我有一个项目，它被拆分为父应用程序，以及几个可重用的子组件在单独的存储库中。我想在这些子组件中定义默认的 CSS 变量，它可以被父应用程序覆盖，但是我找不到正确的语法。这是我尝试过的：
https://codepen.io/daviestar/pen/brModx
颜色应该是蓝色的，但是当:root定义孩子时，颜色实际上是红色的，至少在 Chrome 中是这样。
对此有正确的方法吗？在 SASS 中，您可以!default为子变量添加一个标志，这基本上意味着“声明它是否尚未声明”。
javascript - 在 JavaScript 中管理大量 CSS 变量
我希望在应用程序中将动态调色板（约 300 个条目）公开为 CSS 变量。今天，它完全在 JS 中进行管理——生成内容时，直接应用调色板（例如，通过将 style='rgb(...)' 设置为新元素）。但是当调色板更新时，只有新内容使用新调色板。显然 CSS 变量解决了这个问题。
我已经将 CSS 变量用于其他功能，并且逻辑有效。大致而言，html 看起来像：
使用相应的运行时 JS 代码，如：
当它运行时，它会更新<html>元素，所以它现在看起来像：
如果我添加大约 300 个新变量，则该<html>节点在 DOM 检查器中是不可读的，并且会伤害我的敏感度。问题是，如何在不影响性能的情况下最好地管理这种情况（假设将 ~300 个变量附加到 html 节点还没有降低性能）？
我可以创建一个专用<style>标签并生成文本内容以获取:root {...}代码，但是对于浏览器来说，这样做的开销似乎要高得多——它必须从头开始重新解析所有内容并重新计算所有样式。即使只有一个 sep<style>节点也可能比填充更可取，<html>所以我可以有一个“调色板节点”来管理噪音，但是在样式元素上设置属性（似乎）不起作用——属性被设置，但是没有效果。
我只是 SOL 吗？我对“只使用 XXX 框架，所有你会得到治愈的疾病”不感兴趣，除非这些框架用于说明底层 CSS/JS 行为，因为它们不会在 DOM 节点上大便。
html - :root 导入的 CSS 在 Safari 和 IE 11 中不起作用
:root选择器在某些浏览器中不起作用。
代码：
这些导入的 CSS 不适用于Safari 5.1.7和IE11。
css - 是否可以在 css“背景 url”中使用 css 变量
我想在 CSS 文件中设置一个包含我所有图片的基本域，这是我尝试过的：
全局.css
s1.css
并在 html 中加载 s1.css
HTML 的背景颜色确实发生了变化，但没有显示背景。所以我尝试了其他方式：
全局.css
s1.css
没有帮助
仅在我为图像设置完整 URL 时有效，如下所示：
全局.css
s1.css
但这不是我想要的……可以在“背景”中使用 css 变量吗？
google-chrome-devtools - chrome 开发工具分析 css 变量
我是使用 chrome 开发工具进行分析的新手。我想知道性能命中 css 变量是否/有多少，所以想将同一页面与服务器端预处理 css 与 css 变量进行比较。
在 chrome 开发工具分析器中，我看到了解析样式表、绘制等活动。在将预处理的 css 与 css 变量进行比较时，有什么建议可以关注哪些分析器活动？
webpack - 是否可以从`css`文件传递PostCSS cssnext customProperties变量
当使用带有 webpack 的 PostCSS 时，我使用postcss-cssnext这个选项来自定义属性：
我使用variables选项来覆盖在某些节点模块中定义的变量（react-toolbox例如）。
是否可以将css文件路径传递给variables某些方式？例如：
在我的myOverrideVars.css文件中：
我必须使用 JavaScript 来覆盖 css 参数，这有点烦人..