问题标签 [css-variables]

我真的很喜欢 Google 的 Polymer，而且我喜欢 GSAP——到目前为止，我一直在顺利地结合使用这两者。不幸的是，我现在遇到了一个问题——如何将 GSAP（具体来说是 TweenMax）与自定义 css 变量一起使用？

例如：
要更改I would 但是当我尝试为 css 变量设置动画时会成为一个问题，该变量someCssProperty采用. 我曾尝试使用 （显然给了我错误）并且我也尝试使用 （引号引起来） - 但是这导致开发人员控制台上没有更改/动画和错误消息。someElement
TweenMax.to(someElement, 1, someCssProperty: "value");
someCssProperty--some-custom-css-variable
TweenMax.to(someElement, 1, --some-custom-css-Property: "value");

TweenMax.to(someElement, 1, "--some-custom-css-Property": "value");
some-custom-Css-propertyinvalid tween value

所以问题是：我将如何使用 TweenMax (GSAP) 为自定义 css 变量设置动画？

谢谢你的帮助 ：）

编辑：

我尝试过通过

但这改变了元素样式，就好像我在 css 中用

样式（因为它没有动画，只是立即改变）

我正在尝试使用 CSS 变量来生成动态路径。

示例：

这是由于未找到模块而失败'var(--hpe-fonts-path'，这是 webpack 日志：

任何指针？

铬 51 结果

火狐结果

测试.js

测试.css

测试.html

为什么两个不同浏览器的结果不一样？

我不currentColor经常使用，但当我使用时，它非常有用。

所以我对CSS 变量的到来有点兴奋。

让我们看一个红绿灯。

NB请相信我，日本的交通信号灯会从红色变为琥珀色到蓝色。我知道这很难相信。我知道蓝光看起来有点绿。但它不是，它是蓝色的。

现在，关于聪明的事情

是它只是读取当前值color并使用它。

相比之下...

那不能引用另一个样式声明的当前值，可以吗？

因此，您需要设置 4 个变量（就像您需要color:在上面的样式中声明 4 次一样）：

然后......您需要稍后引用每个不同的变量。这意味着background-color每个变量都有不同的声明：

真的？！

这不可能。我错过了什么吗？

有没有办法currentColor重现var(--current-color)？

CSS 变量有没有办法表示另一个样式声明的当前值？

<img />我知道我可以使用and PHP（或就此而言）解决下面的问题javascript，但如果可以的话，我想使用 just 来解决它CSS。

我已经标记了一个语言菜单，我希望在每个命名语言旁边出现一个标志图标。

理想情况下，我不希望每次添加新语言时都在 CSS 中添加新行。

但是有什么方法——使用CSS 自定义属性attr()或其他方法——我可以让浏览器为每个列表项导出正确的背景图像，只使用（例如）和？class="fr"data-language="fr"

请注意，我已经为这超出了 CSS 当前的能力做好了充分的准备——但我很想知道是否有任何创造性的方法来解决这个问题。

附加信息：

我的第一种方法是不够的，因为它不允许标志图标有圆角：

但是，如果这里有任何实现我的目标的潜力，我很乐意跳过圆角。

例子：

当它被渲染时，计算出来的 CSS 就是这个值。

即使我使用的后处理器将计算值作为后备注入，该值本身也不是字符串，因此对于content.

This week I discovered the glory of CSS3 variables! Love them!

My question... is there a way I can get/set these variables in JavaScript?

如果我的浏览器有来自 CSS 属性的本机实现，那么我应该有某种 Javascript API 来操作 mixins，就像我可以使用 CSS 变量一样：

我用谷歌搜索了它，但遗憾的是大多数情况下我遇到了一个 css 框架，该框架有某种 hack 可以用 javascript 制作 css mixin，遗憾的是我没有找到关于它的 API 文档，有人知道怎么做吗？

HTMLElement.style是一个CSSStyleDeclaration有一个 API，但在那里我只能找到 setProperty 方法而没有 setMixin 方法。

进步：

如果我添加到 style 属性，@apply --some-mixin;则不应用 mixin。现在我想我应该尝试制作自定义内联 css 并添加到文档中，但这仍然是一些 hacky 方法，而且它也不起作用。

这里有一些用于测试的片段，但请注意，您需要在浏览器中激活体验式 Web 平台功能才能看到 mixin 工作！

我正在设计一个新的博客模板。我想通过更改变量的值来轻松地同时更改整个模板颜色，所以我使用了这些行：

但不幸的是，它在 Edge 浏览器中不起作用，即使我使用了前缀：

我在一系列元素上有以下css。

旋转变换工作正常，但没有开始缩放。如果我将其更改为

...有用。

编辑：从进一步的测试中，如果我取出任何一半，每个都单独工作：

仅当两个 css 变量位都存在时才会失败：

那么，是否存在只能使用 css 变量的限制，还是我还缺少其他东西？