MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

var()

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Summary

La función var() puede ser utilizada como valor en cualquier propiedad de un elemento. La función var() no puede ser usada como nombre de una propiedad, selector o cualquier cosa que no sea un valor de propiedad. (Hacerlo provoca normalmente una sintaxis erronea o bien un valor que no tiene conexión con la variable).

Sintaxis

El primer parámetro que recibe la función es el nombre de la custom property que será reemplazada. Se puede utilizar un segundo parámetro opcional como fallback de el primero. Si la custom property referenciada por el primer parámetro no es válida, entonces la función utiliza el valor del segúndo parámetro.

var( <custom-property-name> [, <declaration-value> ]? )

Valores

<custom-property-name>
El nombre de la custom property Se define como un identificador válido cualquier nombre que comience por dos guiones. Las "custom properties" son para uso exclusivo de autores y usuarios. CSS no dará nunca un significado más alla del que se detalla aquí.
<declaration-value>
El valor de la custom property. Asignará como valor cualquier secuencia de uno o más elementos, siempre que sean una expresión de valor válida, es decir, que contengan <bad-string-token>, <bad-url-token>, unmatched <)-token>, <]-token>, <}-token>, o top-level <semicolon-token> tokens o <delim-token> tokens con valor  "!" .

Examples

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
/* Fallback */
/* En el estilo del componente: */
.component .header {
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/* En el estilo de la aplicación: */
.component {
  --text-color: #080; /* header-color no está definido y por lo tanto permanece con el valor "blue" definido como fallback */
}

Especificaciones

Especificación Estado Comentario
CSS Custom Properties for Cascading Variables Module Level 1
The definition of 'var()' in that specification.
Working Draft Definición inicial

Browser compatibility

Característica  Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 48[2]
49
29 (29)[1]
31 (31)
No support 36 9.3[3]
Característica  Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 50 29 (29) No support 37 9.3[3]

[1] This feature is implemented behind the preference layout.css.variables.enabled, defaulting to false and using the old var-variablename syntax in Gecko 29. Starting from Gecko 31 the preference is enabled by default and the new --variablename syntax is used.

[2] Chrome 48 enabled through the "Experimental Web Platform features" flag in chrome://flags.

[3] See WebKit bug 19660.

See also

Etiquetas y colaboradores del documento

 Colaboradores en esta página: jroji
 Última actualización por: jroji,