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

Posted 2023-02-22

【中文标题】有没有办法用 url() 插入 CSS 变量？

【英文标题】：Is there a way to interpolate CSS variables with url()?

【发布时间】：2017-07-08 21:03:10

【问题描述】：

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

这是我的示例代码：

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


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

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

【问题讨论】：

你是如此亲密，--url: url(yoururl);background: var(--url);

@pol：那一点也不接近。这与这个问题的意义相去甚远。尽管如此，它是解决 url() 问题的唯一方法。

@SharmaJ 您在寻找什么样的新答案？

@TemaniAfif 我不能完全确定 OP 对问题的观点与将我带到这里的原因相同，但我希望这样做：:root --url: "https://example.com/images"; body background: url(var(--url)/bg1.jpg); #wrapper background: url(var(--url)/bg2.jpg); 不幸的是，我似乎只能使用 javascript 或在开发和生产环境之间编辑大量代码行。哦，好吧。

【参考方案1】：

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

但是你不能对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);。这是因为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() 来执行插值。

【讨论】：

明白你的意思！ @boltclock。我不知道 url() 是如何被解析和标记的。如果其他人想进一步阅读，这里是一个有用的链接 - typedef-url-token。

感谢您的出色回答。很遗憾 CSS 设计师没有解决这个用例。 :-(

【参考方案2】：

我在 Cordova 的一个项目中遇到了同样的问题，所以我使用了：

header
  --bg-header: url(../img/header_home.png) left center/cover no-repeat;
  background: var(--bg-header,
      url("../img/header_home.png") left center/cover no-repeat
  );

显然，如果您在 --var 声明中使用带有双引号的 url("")，则该值将不起作用。

【讨论】：

当我尝试将其设置为 url(PATH_WITH_OR_WITHOUT_QUOTES) 作为 var 值时，我不断获得 Css Syntax Effor。有什么想法吗？