复杂属性中的CSS变量

Question

我们说我有setVibility(false)属性：

box-shadow

如果我想从box-shadow: 5px 5px 0 #ccc;创建变量怎么办？在SCSS中，我可以这样做：

#ccc

但它不适用于原生CSS变量。或者也许我错过了什么？

Answer 1

CSS变量是一项实验性功能，目前不支持任何地方（不支持IE，Edge考虑，Firefox和Chrome - 最新版本都可以）。有关它的更多信息：http://caniuse.com/#search=css%20variables

// declaring a variable
.element {
  --variable: #ccc;
}
// using a variable
.other-element {
  box-shadow: 0 2px 3px var(--variable);
}

此处有更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Answer 2

伙计我知道它是一个新功能，但你不能称它为实验性的，因为它已经登陆稳定版Chrome。

至于我的情况，我找到了一个解决方案。我可以在另一个变量中重用该颜色，然后才在实际属性中使用它。这是一个例子：

:root {
    --focus-input-color: #6db3fd;
    --box-shadow-focus: 3px 3px 0 var(--focus-input-color),
                        -3px -3px 0 var(--focus-input-color),
                        -3px 3px 0 var(--focus-input-color),
                        3px -3px 0 var(--focus-input-color);
}
.element {
    box-shadow: var(--box-shadow-focus);
}

我不知道为什么会这样做以及为什么当我直接在一个属性中使用--box-shadow-focus时它不起作用，但这就是它在Chrome 49中的表现。