有没有办法用url()内插CSS变量? [英] Is there a way to interpolate CSS variables with url()?

问题描述

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

I want to store my background URLs in custom properties (CSS variables) and use them with the background property. However, I couldn't find a way to interpolate the string when using it as a parameter in url().

这是我的示例代码:

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

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

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

I know that this can be easily done in Sass or LESS using the interpolation function but I'm curious if there is a way to do it without any pre-processor.

推荐答案

您可以使用大多数CSS函数(包括rgba())执行插值(请参见示例

You can perform interpolation with most CSS functions, including rgba() (see an example here). In fact, interpolation is one of the main features of custom properties.

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

But you cannot do this with url(), as url(var(--url)) is parsed not as a url( function token followed by var(--url) followed by a ), but a single url() token that is invalid because the var(--url) is being treated as a URL itself, and unquoted URLs in url() tokens cannot contain parentheses unless they are escaped. This means the substitution never actually occurs, because the parser never sees any var() expressions in the property value — indeed, your background declaration is completely invalid.

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

If you didn't understand any of that, that's fine. Just know that you cannot use var() interpolation with url() due to legacy reasons.

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

Even though the problem depicted in the question is related to the legacy url() token, you cannot do this by building URL tokens out of several var() expressions either, in case you were thinking of trying something like --uo: url(; --uc: ); or --uo: url("; --uc: ");, and background: var(--uo) var(--url) var(--uc);. This is because custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens).

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

If you want to specify a URL in a custom property, you need to write out the entire url() expression, and substitute that entire expression:

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

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

或者，使用JavaScript代替var()进行插值.

Or, use JavaScript instead of var() to perform the interpolation.

这篇关于有没有办法用url()内插CSS变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！