css - 有没有办法用 url() 插入 CSS 变量？

Question

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

这是我的示例代码:

:root {
    --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
}

body {
    background: url(var(--url));
}

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

Answer 1

您可以使用大多数 CSS 函数执行插值，包括 rgba()(参见示例 here)。事实上，插值是自定义属性的主要功能之一。

但是你不能用 url() 做这个，因为 url(var(--url)) 被解析为不是 url( 函数标记后跟 var(--url) 后跟 )，但单个 url() 标记无效，因为 var(--url) 本身被视为 URL，url() 标记中未加引号的 URL 不能包含括号，除非它们被转义。这意味着替换从未真正发生，因为解析器从未在属性值中看到任何 var() 表达式——实际上，您的 background 声明是完全无效的。

如果您不理解其中任何一个，那也没关系。只知道由于遗留原因，您不能对 url() 使用 var() 插值。

即使问题中描述的问题与遗留 url() token 相关，您也无法通过从多个 var() 表达式构建 URL token 来实现此目的或者，如果您正在考虑尝试类似 --uo: url(; --uc: ); 或 --uo: url("; --uc: "); 和 背景:var(--uo) var(--url) var(--uc);。这是因为 custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens) .

如果你想在自定义属性中指定一个 URL，你需要写出整个 url() 表达式，并替换整个表达式:

:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}

或者，使用 JavaScript 而不是 var() 来执行插值。