html - 在 HTML 页面中实现 CSS 变量

Question

我有一个 HTML 文件，其中包含外部 CSS 文件中提到的许多背景图像和颜色，并且它链接在 HTML 的 header 标记内。

我想使用 CSS 变量来捕获背景图像和颜色的路径，并在 HTML 文件中使用它。

是否可以在不使用任何 Javascript 或服务器端语言或插件的情况下使用 CSS 变量。我只能使用纯 CSS 和 HTML 来实现这一点。我也看过http://lesscss.org网站，但他们使用了一些插件，我无法使用。

这是可以实现的吗？如果是，任何人都可以编写一些示例代码吗？

score 1 · Accepted Answer

目前这在跨浏览器的方式中是不可能的，但该功能正在被指定，并有望在未来几年内广泛使用:)

建议的语法

:root { 
    var-main-background: #f00;
    var-main-color: #111;
}
h1 { 
    background: $main-background;
    color: $main-color;
}

注意：这目前在浏览器中不可用，因此您必须同时使用诸如 LESS 或 SASS 之类的解决方法。

score 0 · Accepted Answer

0

我认为实现这一目标的唯一方法是使用 LESS。

于 2012-07-17T18:45:28.050 回答

score 0 · Accepted Answer

LESS中有CSS变量，大家投反对票前请看问题。

LESS 是一个 javascript 文件，它将用这些 CSS 变量替换它们各自的值。使用纯 HTML 和 CSS 无法实现这一点。这就是为什么首先创建 LESS 和其他动态样式表语言的原因。