dinamicas - ¿Hay alguna manera de interpolar variables CSS con url()?
css variables w3schools (2)
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.
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.
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á.