问题标签 [css-variables]

我将如何将 javascript 变量传递给 css 文件，这样 css 文件可以使用该变量来动态缩放页面。我已经想出了一个技巧，可以使用 REM 单元使用单个 javascript 变量来实现。

这个问题似乎是一个无关紧要的问题，你可以用更多的 javascript，更少的 CSS 来解决它。但是，当页面布局变得很大并且每次光标移动时需要更新的元素数量增长到数百个时，由于所有滞后，javascript（尤其是如果您使用的是 JQuery）变得越来越不实用。

我已经知道有一些 CSS 变量非常适合这个。然而，仅仅看一眼 IE 中 CSS 变量的 polyfill 就让我畏缩不前，以至于我在心里找到了对 IE 的怜悯。那么，是否有任何替代 CSS 变量的方法来允许将多个变量传递给 CSS？

另外，我不是在寻找 LESS 或任何其他预处理器，而是在寻找纯 CSS。像 LESS 这样的事情在皮肤下使用 javascript，我发布这篇文章是为了避免。

澄清：澄清一下，这个问题的最终目标是找到一些方法来执行更少的 DOM 操作以获得更好的性能。

澄清 #2：是的，可以更有效地对演示进行编码。这就是为什么它是一个演示：以更简单的方式演示我的问题。

假设您有颜色的 CSS 自定义属性：

--color: 255,0,0

并且您希望每次都特别混合它rgb或rgba根据需要进行混合。这是有效的 CSS：

rgba(var(--color), .3)

...但是 Sass 爆炸了。我一直在尝试看看我是否可以编写一个 mixin 或其他东西，但我不知道如何绕过 Sass 坚持使用它自己的颜色函数，即使它们不是必需的。

我继承了一个使用 Polymer 构建的 Web 应用程序作为前端。当我运行各种 Docker 命令时，它大部分都可以工作，但存在一些 CSS 问题。具体来说，某些 Polymer 样式似乎没有被编译。例如，对于<paper-dialog>元素，颜色变量不会被替换：

在另一个示例中，一堆图标都被放置在彼此之上并且没有正确定位。

我已经运行了项目附带的各种 Gulp 命令，其中包括对所有内容进行硫化。在大多数情况下，样式似乎确实是“聚合的”。我以前从未使用过 Polymer，所以我对如何将组件实际构建到 HTML 和 CSS 中有点迷茫。有没有我错过的明显步骤没有在项目中记录？

我对 css 变量进行了修改，找到了一个有趣的应用程序：您可以定义一个--color变量，并将其用作基于类的不同属性的值：按钮的背景可以用 填充--color，而选项卡控件可以使用使用border-bottom--color突出显示当前选项卡，如下所示：

通过定义类来改变 --color 我们可以轻松地创建不同的配色方案，而不必特定于我们想要样式的项目：只需要一个类.red，而不是单独的.red.fillbutton//.red.borderbutton.red.tab.current

由于某些浏览器不支持css变量，我想我会尝试使用像scss这样的处理器来复制这个功能，但是scss变量似乎只是全局的，因此不能模仿这个用例。有没有办法让我使用 scss 以类似的 DRY 方式实现上述行为？

我正在尝试使用 CSS 变量为 IE 做一个优雅的后备。所以我这样做了：

这可行，但是 IE 警告 ActiveX 组件并让我允许它。我在下面附上了截图。在没有 ActiveX 提示的情况下是否有回退？

<input type="color">在没有默认值的情况下使用似乎会导致一个无用的控件（我尝试使用 Firefox 53），因为颜色永远不会改变，在添加默认值时，一切都按预期运行（工作示例）。

我实际上使用这个值来填充一个 css 变量，例如：

限制在 HTML 属性中设置默认值强制我手动设置它，而我想设置value通过 JS 获取当前 CSS 变量“ --front-color”值。

如何通过 jQuery 获取 CSS 变量的值？

我有一个动态 Polymer 2.0 应用程序，但它似乎不适用于@apply.

我有 CSS 变量和 mixins：

然后我有用户可以选择和应用的主题：

问题是只有直接变量更新，那些设置@apply不更新。class="content-one"有效，课程class="content-two"失败。

我做错了什么，如何动态更改 mixins 的样式？

TL;DR：如何使用 SCSS 为旧版浏览器提供具有后备功能的 CSS 变量。

我试图理解这篇文章。在我看来，你必须已经是高级 SASS 用户才能理解它，而我不是。更糟糕的是，这是我在这个主题上找到的唯一一篇文章。

这是我想要实现的目标：

我的scss应该是：

那么处理后的CSS应该是

通过玩一点，我已经可以像这样得到 CSS 变量的值：

要使用它：

这将导致：

根据 MDN，该var函数接受多个回退。但我无法让他们工作。

我在 Chrome、Firefox 和 Safari 上尝试了以下代码。background-colorfor在上述.demo3所有浏览器上都是透明的。

是代码错误，还是因为浏览器没有实现变量回退？

如果这是一个简单的问题，请原谅我，但我在 CodePen 上与此作斗争并且不知道发生了什么。

我有代码：

问题是 Codepen 声称 var(--ile) 不是整数（嗯？），即使它显然是（它没有单位，因为它不是 10.0，所以它不能是浮点数）。我错过了什么？我试图查看网络上的 CSS 规范和各种示例，并且使用数字作为变量是合法的，那么如果 10 不是整数，如何强制转换为整数？