有没有办法用url（）插入CSS变量？

Question

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

这是我的示例代码：

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

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

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

Answer 1

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

但是，您不能使用来执行此操作url()，因为url(var(--url))不能将其解析为url(功能令牌，var(--url)后跟一个)，但单个url()令牌无效，因为该令牌var(--url)本身被视为URL本身，并且url()令牌中未引用的URL
不能包含括号，除非将其转义。这意味着替换实际上不会发生，因为解析器从不会var()在属性值中看到任何表达式-
实际上，您的background声明是完全无效的。

如果您不了解其中任何一项，那就很好。只知道由于遗留原因您不能使用var()插值url()。

即使问题中描述的问题与遗留url()令牌有关，也不能通过在多个var()表达式中构建URL令牌来实现此目的，以防万一您正在尝试尝试类似--uo: url(; --uc: );或--uo: url("; --uc: ");，和的情况background: var(--uo) var(--url) var(--uc);。这是因为[自定义属性不能包含不匹配的字符串定界符或部分url()标记（称为错误URL标记）。

如果要在自定义属性中指定URL，则需要写出整个url()表达式，并替换为整个表达式：

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

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

或者，使用JavaScript代替var()执行插值。