dinamicas - ¿Hay alguna manera de interpolar variables CSS con url()?

css variables w3schools

Question

Quiero almacenar mis URL de fondo en propiedades personalizadas (variables CSS) y usarlas con la propiedad de fondo. Sin embargo, no pude encontrar una manera de interpolar la cadena al usarla como parámetro en url() .

Aquí está mi código de muestra:

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

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

Sé que esto se puede hacer fácilmente en Sass o LESS usando la función de interpolación, pero tengo curiosidad por saber si hay una manera de hacerlo sin ningún preprocesador.

Answer 1

Puede realizar la interpolación con la mayoría de las funciones CSS, incluida rgba() (consulte un ejemplo here ). De hecho, la interpolación es una de las principales características de las propiedades personalizadas.

Pero no puede hacer esto con url() , ya que url(var(--url)) se analiza no como url( token de función seguido de var(--url) seguido de a ) , sino como un token url() único que no es válido porque la var(--url) se trata como una URL en sí misma, y ​​las URL sin comillas en los tokens url() no pueden contener paréntesis a menos que se escapen. Esto significa que la sustitución nunca ocurre realmente, porque el analizador nunca ve ninguna expresión var() en el valor de la propiedad; de hecho, su declaración de background es completamente inválida.

Si no entendiste nada de eso, está bien. Solo sepa que no puede usar la interpolación var() con url() debido a razones heredadas.

Aunque el problema representado en la pregunta está relacionado con el token heredado url() , tampoco puede hacerlo creando tokens URL a partir de varias expresiones var() , en caso de que esté pensando en intentar algo como --uo: url(; --uc: ); o --uo: url("; --uc: "); y background: var(--uo) var(--url) var(--uc); . Esto se debe a que las propiedades personalizadas no pueden contener delimitadores de cadena no coincidentes o partes de tokens url() (llamados tokens de URL defectuosos) .

Si desea especificar una URL en una propiedad personalizada, debe escribir toda la expresión url() y sustituir esa expresión completa:

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

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

O use JavaScript en lugar de var() para realizar la interpolación.

Answer 2

Tuve el mismo problema en un proyecto con Córdoba, así que usé:

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
  );
}

Aparentemente, si usa url ("") con comillas dobles en la declaración --var , el valor no funcionará.