问题标签 [css-variables]

我试图在 javascript 中实现的内容如下所示：

在 css 中，我正在执行以下操作：

似乎它不起作用。如果未定义新值，甚至可以在回退中使用旧值吗？

现在对自定义 css 属性的支持变得越来越普遍，我想到使用它们来简化基于滚动的动画的创建。在 Javascript 中，我使用 style.setProperty('--customProperty', value) 在用户滚动时调整特定元素的自定义属性。

它在 Chrome、Firefox 和 Safari 10 中运行良好。

但是，在 Safari 9.1（确实支持自定义属性）中，我只能设置一次属性。设置后，它不会更新为新值。

我已经在 CodePen 中得到了这一切：https ://codepen.io/kirkhadden/pen/JJbXmE/

我找不到任何信息，甚至没有提到这种行为。我已经在 Safari 中测试了 style.setProperty() 的其他更简单的用法，并且我继续发现一旦设置了属性，即使我尝试先删除该属性，Safari 也不会更新相同的属性。

这是 Safari 9.1 中的错误吗？有解决办法吗？还有另一种使用javascript设置css变量的方法吗？

更新

因此，我可以使用 jQuery 的 .attr() 方法来设置属性，而不是 style.setProperty。这并不理想，因为这会覆盖任何其他样式属性，但它适用于此。

更大的问题是，这整个解决方案是基于在我所有的动画元素上设置普通 css 动画的想法，但是将播放状态设置为“暂停”，然后使用 javascript 根据滚动位置来操作动画延迟. 这使我可以利用继承来以最少的 DOM 操作为许多事物设置动画。

再次，Safari 9.1 是障碍，因为看起来不像 Chrome 或 Firefox，如果播放状态是“暂停”，Safari 根本不会启动动画，并忽略动画延迟。

我正在尝试将 css 自定义属性与 @page 规则一起使用，但它似乎不起作用。这是有道理的，因为 css 变量级联并且:root选择器和 @page 规则没有子/父关系。

下面是我想做的一个典型例子：

有什么方法可以将变量与@page 规则一起使用？

我希望能够将 LESS 的变暗功能与 CSS 自定义属性一起使用。我有这样的想法：

但这给了我一个错误。还有另一种方法吗？

我正在尝试 CSS 变量，我想使用 RGB 颜色。

这是我当前的 CSS 变量：

因此，当使用以下代码时，这绝对可以正常工作：

但有些段落也使用这种原色，我想给它们一点透明度。现在我可以替换它并创建另一个 CSS 变量，如下所示：

但这只是感觉混乱和混乱，有两种原色，如果我使用一些不同的透明胶片会怎样。我还可以使用以下 CSS 变量：

并使用以下代码输出：

这可以按我的意愿工作，我个人认为这是一种更好的方法，但是我的颜色无法在我的代码编辑器中预览查看图像。

查看 --dark 变量，使用此代码它不会显示颜色。

理想情况下，我想使用：

并像这样输出：

但它不会工作？

我正在尝试在 CSS / scss 中构建我自己的微型可扩展网格。到目前为止，我发现了这个决定：

然后我尝试使用 scss 来缩短列类描述（同时这将允许我在整个代码中的一个位置更改列数 - 在 CSS 变量中--columns）像这样

但它没有用。有趣的细节是，当我将@for语句从@for $n from 1 throughvar(--columns)`` 更改为@for $n from 1 through12它时编译良好。@for并且在body内编译 CSS-Variable 没有问题。.col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }很好地编译成所需的一系列类。

如果我使用 scss 变量$columns而不是 CSS 变量，那么我需要将我的 grid.scss 文件导入到项目的所有其他 scss 文件中。

这是我在 StackOverflow 上的第一个问题，所以如果需要任何其他详细信息，请告诉我。

我正在尝试获取浏览器窗口的高度和宽度并将其显示在正文上以及更改高度以匹配。

这是我当前的代码：

上面的代码在 body 上显示宽度和高度 ok，现在是时候将它添加到一个 css 变量中了：

我知道代码不正确，但我找不到任何可比较的示例，这是一个小提琴，以防代码不够。

https://jsfiddle.net/rbtwsxd8/6/

我通过 JavaScript 将一些样式表动态加载到我的应用程序中。在这个样式表中，我有不同的 CSS 变量，我想从我的 JS 中读取/写入。

直接嵌入在 head 标记中的样式表得到了正确处理。CSS 变量由 CSS 评估并在 JS 中可见。

在运行时动态加载的样式表确实有一些奇怪的错误。CSS 变量由 CSS 评估，但对 JS不可见。

有人有提示吗？

具有最小错误演示的 Plunker：

https://plnkr.co/edit/EChqjvZQJp7yz3L6nknU?p=preview

我用来动态加载 CSS 的方法：

我用来读取 CSS 变量的方法：

示例 CSS：

在 CSS 中使用calc()ulated 属性时，是否可以通过 Javacsript 访问它们的扩展（即实际计算的）值？

例如，考虑以下 CSS：

和 Javascript：

人们期望看到56px被打印出来；而是返回字符串"calc(var(--width) / var(--ratio))"。

即使您尝试将其应用于某些 CSS 类属性并改为从类声明中读取，它也不起作用：

Javascript：

并且控制台显示"var(--height)"。

那么，有没有办法通过 Javascript 访问最终的计算值？

有没有办法将 CSS 变量与 Sass 函数一起使用，例如 lighten？像这样的东西：

我收到一条错误消息，“Argument $colorof lighten($color, $amount)must be a color”。

我正在使用 CSS（不是 Sass）变量，因为我需要在 js 中使用它们。