css - 为什么我的 CSS 变量不起作用?

标签 css

我第一次使用 CSS 变量,但无法让它工作。我在 Chrome 上实现了它,并对我的代码进行了三次检查。

@default: red;
#myDiv {
color: @default;
}
<div id="myDiv">Hello World</div>

最佳答案

不幸的是,CSS本身并不支持变量,但是有一些库可以增强CSS语法,以允许您使用变量等。最受欢迎的是 Matt Bell 提到的 Less 和 Sass。

基本上,它们所做的就是解析您编写的文件,并输出一个文件,其中您使用的所有 css 变量和函数都被编译成一个有效的 CSS 文件,您可以在网页中包含/使用该文件。

http://sass-lang.com/
http://lesscss.org/

官方 W3C CSS 规范:
http://www.w3.org/TR/CSS/

编辑:

自从几年前最初回答以来,事情已经发生了变化。 CSS 变量现在是规范的一部分

有关文档/说明,请查看 excellent MDN article .

获取当前/最新的支持和统计信息 check out caniuse.com .

关于css - 为什么我的 CSS 变量不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7134273/

相关文章:

html - 如何以类似网格的方式定位我的内容

javascript - 如何在网上商店销售价格上设置价格颜色

jquery if 条件为 css 显示

javascript - angularjs 不关注下一个元素

javascript图像调整窗口大小

javascript - 如何在文本输入中设置图标?

html - CSS 子选择器 (>) 不适用于 IE

javascript - 是否可以使用 javascript 获取外部 css 文件的内容以添加到 svg 文件?

css - 当前菜单项的子菜单显示当前菜单颜色

javascript - 如何为 React 和非 React 消费者提供解决方案?