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

Question

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

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

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

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

Я знаю, что это может быть легко сделано в Sass или МЕНЬШЕ с использованием функции интерполяции, но мне очень интересно, если есть способ сделать это без каких-либо пре- процессор.

Answer 1

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

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

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

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