Есть ли способ интерполировать переменные CSS с url()?

Я хочу сохранить свои фоновые URL в пользовательских свойствах (переменные CSS) и использовать их с свойством background. Тем не менее, я не мог найти способ интерполяции строки при ее использовании в качестве параметра в url().

Вот мой пример кода:

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

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

Я знаю, что это можно легко сделать в Sass или LESS с помощью функции интерполяции, но мне любопытно, есть ли способ сделать это без предварительного процессора.

Ответ 1

Вы можете выполнить интерполяцию с большинством функций CSS, включая rgba() (см. Пример здесь). Фактически, интерполяция является одной из основных особенностей пользовательских свойств.

Но вы не можете сделать это с помощью url(), так как url(var(--url)) анализируется не как url( токен функции, за которым следует var(--url) за которым следует a ), а как один токен url() который недопустим, потому что var(--url) обрабатывается как сам URL, а URL без var(--url) url() не могут содержать скобок, если их не экранировать. Это означает, что подстановка фактически никогда не происходит, потому что парсер никогда не видит никаких выражений var() в значении свойства - действительно, ваше background объявление полностью недопустимо.

Если вы ничего не поняли, это хорошо. Просто знайте, что вы не можете использовать var() с url() по устаревшим причинам.

Несмотря на то, что проблема, описанная в вопросе, связана с устаревшим токеном url(), вы не можете сделать это, создав URL-токены также из нескольких выражений var(), в случае, если вы хотели попробовать что-то вроде --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() для выполнения интерполяции.

Ответ 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
  );
}

Очевидно, что если вы используете url ("") с двойными кавычками в объявлении --var, значение не будет работать.