soy Kseso y esto EsCSS

Variables Css módulo nivel 1. Sintaxis actual Julio 2014

Variables Css módulo nivel 1. Sintaxis actual Julio 2014

·Por Kseso ✎ 7
Variables Css módulo nivel 1. Sintaxis actual Julio 2014

Dice el consorcio a modo de introducción:

Los documentos o aplicaciones pueden contener un montón de CSS. Muchos de los valores en el archivo CSS será datos duplicados, por ejemplo, los colores que conforman la identidad del sitio. La alteración de estos datos puede ser ardua y propensa a errores, ya que están dispersos por todo el archivo CSS (o los varios), y no son fáciles de encontrar y cambiar.
Este documento presenta una familia de propiedades definidas por el usuario conocidas como "propiedades variables", que permiten al autor asignar valores arbitrarios a una propiedad con un nombre identificativo y, a continuación, utilizar esos valores en los valores de otras propiedades en otras partes del documento. Esto hace que sea más fácil de leer archivos de gran tamaño, los valores tan aparentemente arbitrarios, ahora tienen nombres informativos, lo que hace más fácil modificar el Css y es menos propenso a errores, ya que sólo hay que cambiar el valor una sola vez, donde se define la variable, y el cambio se propagará a todos los usos de esa variable de forma automática.

Antes de seguir con este artículo de 2012 quizás sea de tu interés ir a este otro de 2016

Post mucho más actual

Lo anterior traducido a mi manera del documento origina CSS Variables Module Level 1 de fecha 15 de Marzo de 2.012

Toda esa parrafada para decir que en vez de definir el valor de background en 50 selectores diferentes, lo que podrás hacer es crear una variable css para esa propiedad al inicio y aplicar la variable a todo elemento que la use, y cuando necesites cambiarlo no buscar los 50, sólo tocar la variable.

Actualización: 1 Junio 2012 12 Marzo 2013

Advertencia: Artículo actualizado:
Con fecha 1 de Junio de 2012 fue publicado la última (por ahora) versión de este módulo, con estatus "Editor's Draft"
En él introduce el uso del prefijo $ para invocar a las variables Css por su nombre.

Advertencia: Artículo actualizado:
En el documento WD del 12 de Marzo de 2013 vuele a introducir el uso de var(nombre_variable) para aplicar las variables, dejando fuera el prefijo $

Actualización2: sobre el nombre elegido

Quizás también te interese el artículo "Las variables Css ¿Son variables u otra cosa?" sobre el acierto o no de llamarlas variables.

Actualización: 24 Julio 2014

Como verás por todo lo que he ido actualizando en este artículo desde que fue publicado originalmente en 2012 los cambio en la sintaxis de las "variables Css" ha sido un no parar.

La última forma y esperemos que definitiva (pues es la recogida en el documento marcado como "Last call" y mantenida en el Editor’s Draft, 15 July 2014) es la siguiente:

Declarando variables. Su sintaxis

La declaración inicial de una "variable Css" es la siguiente:
Un nombre cualquiera para identificar la variable (elegido por tí) precedido de -- (dos guiones medios).

Para utilizar la variable definida (--*) como valor de una propiedad Css a un selector en una regla se declara usando la expresión var(--*). Donde el * (asterisco) es el nombre de la variable definida.

Ejemplos de uso, por favor, para aclararnos todos

Vamos a ponernos en situación con unos ejemplos sacados del documento el W3c.
Definamos:

:root { --color_primario: #06c; --color_secundario: #f0f0f0; }

Sintaxis de las variables Css:

Como ves el prefijo -- es el indicativo de la variable. A continuación el nombre identificador de dicha variable, en el ejemplo son dos, una color_primario y la otra color_secundario.
El paso siguiente será aplicarlas a aquellos elementos que deseemos:

Importante:
Recuerda que en la declaración de la variable se usa la expresión clave -- seguida del nombre asignado pero al aplicar dicha variable en el valor de una propiedad se declara colocando el nombre de la variable definida dentro del paréntesis en la expresión var(--)

/*Definiendo las variables*/ :root { --color_primario: #06c; --color_secundario: #f0f0f0; } /*Uso de las variables*/ article { background: var(--color_primario); color: var(--color_secundario); } article a { background: var(--color_secundario); color: var(--color_primario); }

Sencillo. Utilizamos como valor de las propiedades el nombre indicativo de las variables que hemos creado en el paso anterior.

Reglas universales, anidando variables y variables computadas

Con las variables Css rigen las mismas reglas universales de CSS:

  • Herencia y cascada: los descendientes las heredan.
  • Los valores no permitidos son ignorados.
  • La especificidad del selector también decide qué variable aplicar.
  • Y en caso de conflicto la última declarada prevalece.

Por supuesto, allí donde ahora declaramos un valor, cualquiera, podremos sustituirlo por una variable css. Esto significa que las propiedades que admiten valores múltiples pueden contener múltiples variables. Incluso tener variables dentro de variables, cual muñecas rusas

Usar la variable var- como expresión Css

Alternativamente, la variable --* también puede ser usada como expresión Css en el valor de una propiedad:

:root { --normal: 1.3; --peque: .8; } h1 { font-size: calc(var(--normal)rem + 10px); line-height: calc(var(--normal)rem + var(--peque)rem); }

En este último ejemplo, el h1 se mostrará con un tamaño de 1.3rem más 10px y su altura de línea será el resultado de la suma 1.3rem + 0.8rem.

Esto de las variables Css te suena conocido

Efectivamente, las variables Css no es un invento nuevo. Es lo mismo que otros muchos lenguajes ya tienen. Y no sólo eso, aplicaciones como Sass o Less e incluso en muchos CMS te lo encontrarás, como esta plataforma de blogger, pero cada cual haciendo uso de un lenguaje y sintaxis diferente.

Historia de un "Todo cambia"

Este artículo fue publicado originalmente en Marzo de 2012. Lo he ido actualizando a medida que los distintos documentos introducían cambios significativos. He preferido dejar lo obsoleto (marcado como <del>) para que te hagas una idea del proceso.

Pese al cambio en el nombre del documento mantengo y hago uso del término variable para entendernos mejor.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso