问题标签 [css-variables]

我有一个用postcss-mixins制作的 mixin ，我想使用一个 css 变量作为参数，但它不起作用。

然后我称之为：

我怎样才能设法将 css 变量与 postcss-mixins 一起使用？

例如，我可以有一个这样命名的 css 变量： --Button.onHover？

请注意，CSS 变量与 CSS 选择器不同（我必须对此进行解释，因为有人将其标记为重复项）。这是来自superfly-css-variables-colors模块的示例：

在我的自定义元素的定义中，我有以下代码：

但是，CSS 自定义属性不起作用。聚合物只是变成这样：

进入这个：

但我希望输出为：

演示可以在这里找到：http ://plnkr.co/edit/ogMVPKNvc7SYISomWPWm?p=preview

如果我不使用 Polymer，并在纯 JavaScript 中创建自定义元素，CSS 自定义属性将按预期工作。

我搜索了谷歌，但没有找到相关的东西。这里有什么问题？如何将 CSS 自定义属性与 Polymer 一起使用？

我想将我的背景 URL 存储在自定义属性（CSS 变量）中，并将它们与背景属性一起使用。但是，当使用它作为参数时，我找不到插入字符串的方法url()。

这是我的示例代码：

我知道这可以在 Sass 或 LESS 中使用插值函数轻松完成，但我很好奇是否有办法在没有任何预处理器的情况下做到这一点。

我想通过纯 cssz-index在其中显示一个元素在伪元素中的值。

为此，我决定使用 CSS 变量。但问题是这z-index是一个数字，而是content一个字符串。我怎样才能铸造一个价值？

在以下示例中：如果p使用z-index: var(--z)它，则以红色div显示z-index: 8。我想p同时使用z-index和展示after。我该怎么做？

PS：同样的问题在俄语中。

With the introduction of css vars, I would like to know the reasoning of of why -- would be chosen as a way of denoting a var.

Considering CSS has a semi capable calc function, I feel like the -- could easily be confused for a decrement operator in other languages.

I am curious if there is any historical significance or technical limitation that led to choosing --. The double in particular perplexes me, when CSS markers are generally singles (#, ., @, etc). Also using a symbol already being used by other things also is interesting (especially when its valid for a class name to begin with --).

Example:

Disclaimer

Some might argue the validity of this question, but understanding the why is a key technique to remembering a particular concept.

The only discussion I can find related to it:

In the telcon today, we resolved to use a "--" prefix to indicate custom properties and other custom things.

We discussed whether the prefix is maintained or dropped when referring to the custom property from a var() function, but didn't actually resolve. Discussion in the call leaned toward dropping the prefix, like I do currently with var-* properties, but some side discussion with Simon and Sylvain argued for using the full name, as there are confusing cases like "--0" or "----".

So, while I understand the potential confusion caused by authors possibly thinking that var() can take any property name as an argument, I think it's overruled by the confusion over what needs to be escaped in various circumstances. Escaping rules are always very confusing to authors, so I'm going to go with "use the custom property name literally as the var() argument".

Reference:

http://lists.w3.org/Archives/Public/www-style/2014Mar/0467.html

https://www.w3.org/TR/css-variables/#defining-variables

我正在尝试通过 Sass 而不是通过 Sass 绘制 CSS 八边形，并且我在两个版本中都使用了变量。对于 2 的平方根、一个三角形的宽度以及八边形内两个三角形之间的距离，我使用了几乎相同的表达式。

目前，Sass 版本没有问题，但由于与我的 for和undercalc()表达式有关，常规的 CSS 根本不会出现，我似乎无法弄清楚它是什么。这是正在发生的事情的屏幕截图（带有变量的标记）：--octTriW--octTri2Tri:root

我尝试移动 %s 并添加更多，但没有运气。知道我可能遗漏了什么或做错了什么吗？

（参见CodePen上的演示）

我有一些看起来像这样的 CSS 颜色变量：

我想用逗号替换十六进制颜色代码。所以换句话说，我想要一个逗号分隔的颜色变量列表，如下所示：

关于如何编写执行此操作的 bash 脚本的想法？

我正在寻找一些可用于生成一些 postcss 工件的 sed 表达式。我可能应该把它分成两个问题。让我知道。

我正在创建这个superfly-css-utility-fonts模块。它将具有如下字体实用程序：

我计划使用 PostCSS 每个循环来生成这些，如下所示：

我有一个看起来像这样的所有谷歌字体的列表：

使用该输入，我需要输出要在循环中使用的逗号分隔值。换句话说：

我还需要生成像这样的 css 变量：

理想情况下，将有 2 个 sed 表达式来实现这一目标，但其他解决方案也很好。

对不起，如果标题有点令人困惑，但我不知道如何用英语更容易理解地描述它。

有人知道为什么第一个 div 没有红色边框。我会假设--secondary变量会被孩子覆盖，并且会对分配该变量的所有其他变量生效？！

编辑
不要问我为什么 plunker 和 codepen 不支持 @apply 但这几乎是我需要的用例

http://codepen.io/anon/pen/wJQVRO/

在我的聚合物环境中，@apply 有效，但这不是问题，对此感到抱歉..无法确定为什么 codepen 和 plunker 不支持它？！无论如何，我要解释的问题是 div 和 p 元素都有蓝色边框，而不像预期的那样有红色和黑色边框。假设 --primarycolor 集是一组很棒的属性，那么如果它像预期的那样工作，那对我来说将是一个很大的努力。