Question

我正在运行chrome 35。

我对css变量感到很困惑。我需要为我的应用程序使用css变量。例如，

.A{
  var-myVar:red;
  background-color:var(var-myVar);
  font-color:var(var-myVar);
}

然而，我找到了3种不同的css可修饰语法，其中没有一种似乎有效：

var-myVar //doesn't seem to work

--myVar //doesn't seem to work

-webkit-var-myVar //doesn't seem to work

很自然地，我很困惑。

我看到有人建议打开一些css标志 - 但是没有任何重要的css标志可以打开。

谢谢

Answer 1

目前，只有Firefox支持CSS Variables。如果你想使用CSS变量，我建议你使用CSS预处理器，如SASS，LESS或Stylus。

Answer 2

目前，支持CSS3变量的唯一浏览器是Mozilla Firefox：http://caniuse.com/#search=css variables。在早期版本的Chrome中，您可以设置#enable-experimental-webkit-features标志，以便为测试目的启用CSS3变量。但是这个选项已经消失了。

根据Specification，使用变量的正确方法是：

:root {
    --borderRadius:10px;
}

...
#foo {
    border-radius:var(--borderRadius);
}

然而，0.21％的全球支持应该是目前避免使用CSS3变量的原因。如果您希望简化开发，可能希望使用SASS或LESS等CSS预处理器。

css变量 - 困惑？

2 个答案: