---
title: var()
slug: Web/CSS/var()
translation_of: Web/CSS/var()
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>La función <strong><code>var()</code></strong> 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).</p>

<h2 id="Sintaxis">Sintaxis</h2>

<p>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.</p>

<pre class="syntaxbox notranslate">{{csssyntax}}
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt>&lt;custom-property-name&gt;</dt>
 <dd>El nombre de la custom property a la que se hace referencia, representada por un identificador válido, es decir, 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í.</dd>
 <dt>&lt;declaration-value&gt;</dt>
 <dd>El valor por defecto de la custom property en caso de que la custom property referenciada sea inválida. Este valor puede contener cualquier caracter salvo algunos con significado especial como saltos de linea, llaves sin cerrar, exclamaciones o puntos y comas .</dd>
</dl>

<h2 id="Ejemplos">Ejemplos</h2>

<pre class="brush: css notranslate">:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
</pre>

<pre class="brush: css notranslate">/* 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 */
}
</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}</td>
   <td>{{Spec2('CSS3 Variables')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica </th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>48<sup>[2]</sup><br>
    49</td>
   <td>{{CompatGeckoDesktop("29")}}<sup>[1]</sup><br>
    {{CompatGeckoDesktop("31")}}</td>
   <td>{{CompatNo}}</td>
   <td>36</td>
   <td>9.3<sup>[3]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica </th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>50</td>
   <td>{{CompatGeckoDesktop("29")}}</td>
   <td>{{CompatNo}}</td>
   <td>37</td>
   <td>9.3<sup>[3]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Esta característica es activada con la preferencia layout.css.variables.enabled, por defecto, con valor false y usando la sintaxis angituga en Gecko 29. Desde Gecko 31 esta preferencia está activada por defecto y utiliza la sintaxis --<var>nombredevariable.</var></p>

<p>[2] Chrome 48 activable a través de el flag "Experimental Web Platform features" flag en <code>chrome://flags</code>.</p>

<p>[3] Ver {{webkitbug(19660)}}.</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Using_CSS_variables">Usando variables CSS</a></li>
</ul>