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.

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

Comentarios: 7

  1. Buena la w3c llegue a consenso pronto y se libere el caso.
    Personalmente no me gusta mucho la sintaxis, prefiero la declaración con var y el uso con $, pero somos animales de costumbre, nos acostumbraremos.

    ResponderEliminar
    Respuestas
    1. Aunque no me gusta leer las recomendaciones, porque no son aplicables, me puse a mirar un poco esto de las variables.
      Desde el principio yo tampoco me sentí muy cómodo, Mario Vial. Y no lo digo sólo porque están en inglés, sino porque me pareció ver métodos que ya probaron ser ineficaces y que más tarde te limitan para hacer actualizaciones que siempre se vuelven necesarias. OK, ya todos estamos de acuerdo en que no tratamos con verdaderos estándares, así que aún aprobando métodos tipo "cuello de camisa cosido sin botones" que nos van a terminar ahorcando por el simple hecho de crecer, al Consorcio le va a costar muy poco borrar todo de un plumazo y empezar de nuevo.
      Tampoco es tan grave.


      Coincido con tu reparo : ¿por qué eligieron el 'doble guión'? ¡Y encima al guión, que ya tiene de por sí mil usos diferentes!. Cuando se toma el recurso del "doble signo" lo realmente útil es usar uno que esté libre como "prefijo", como un aviso (al programador y al software que lo lean) de que lo que sigue tiene un significado propio. De esa forma se pueden aprovechar hasta letras y números para marcar nuevos propósitos y que nunca se confundan con los anteriores.


      Por otro lado, es interesante remarcar la previsión de los loops o valores que se autollaman (y hasta se autoanulan). Hace un tiempo comentábamos sobre esa característica del CSS que permite modificar elementos en tiempo real y constante.
      Que algunas propiedades o algunos pseudos obtengan un valor y ya después no lo modifiquen, nos abre posibilidades más que prometedoras.

      Pero ya nos estamos yendo del tema ...

      Eliminar
    2. Furoya dixit:
      "¿por qué eligieron el 'doble guión'?"
      A eso sí te puedo responder. Pero no tengas miedo, no es que haya rescatado mi vieja bola de adivino ;-) símplemente pregunté en twitter al editor de documento: Tab Atkins Jr:
      Who knwos?
      why "variables Css" use the notation var(--*)? (the 2 --)
      There I see a break with the css typical syntax

      cc @tabatkins

      Su respuesta en 2 tuits:
      Primero

      @Kseso We wanted a consistent notation between all the custom things, and settled on -- prefix.

      Segundo

      @Kseso So custom MQs will be "@media (--foo) {...}", custom pseudo-classes will be "div:--foo {...}", etc.


      Toda la conversación podéis verla aquí

      Un saludo

      Eliminar
    3. Le vamos a arruinar el comentario a Mario. Pero en fin, pude ver el debate en tuita, y sigo convencido de que al final van a cambiar los dos guiones. Si en algún momento agregaron la arroba, todavía pueden meter otro prefijo más. Y si realmente el CSS va camino a usar funciones o expresiones, eso va a incorporar sintaxis que no van a dejar otra opción. Por supuesto que de última existen las "palabras" ('if', 'media'), aunque los 'caracteres' como marcadores y operadores son mucho más prácticos.

      Gracias, y un saludo para vos también.

      Eliminar
    4. Creo que no "arruinamos" el comentario de Mario. Sólo desarrollamos / opinamos de uno de los aspectos que expone.

      Cómo lo entiendo yo:
      Css ha ido evolucionando para identificar y reglar de forma uniforme y consistente cada parte según qué sea o la función que desarrolla según dónde aparezca.

      Así por ejemplo, tomemos el grafo # lo asocia a un atributo de nombre id del documento (html, xml, svg...), ya aparezca en el Css formado parte de un selector o como parte de un valor uri/url de alguna propiedad (ejemplo filter: url(#myid).
      Lo mismo ocurre con la coma (,) utilizada para separar múltiples valores allí donde son admitidos, ya sea un selector múltiple o un conjunto de valores diferentes de una propiedad.
      Los dos puntos (:) en un selector identifican una pseudoclase y para diferenciarlas de los pseudoelementos a estos añadieron el doble dos puntos (::)

      En otros casos el significado o "valor computado" de un grafo es función de dónde y como aparece, como el grafo >.

      Por otra parte tenemos que en el lenguaje propio de Css todo está reglado y definido: los nombres de las propiedades, los valores admitidos... excepto aquello que puede y debe ser nombrado (dado un nombre) por el usuario. El ejemplo más evidente es el nombre asignado a las keyframes que sigue a la expresión @keyframes y que para ser usado en un elemento debe ser invocado en el valor de la propiedad animation.

      Pues lo que ha hecho es grupo de trabajo del consorcio es buscar una forma de identificar éstos: todo aquello que "bautiza" el usuario. Y la grafía elegida es -- (doble guión)

      Y una de las cosas "bautizables" es el nombre asignado a las "variables css".
      Y casualmente y motivo de la extrañeza de todos (yo el primero) la primera vez que se usa este identificador de "bautizables por usuario" son también las "variables css" (tanto al crearlas --nombre: valor; como al usarlas propiedad: var(--nombre);

      Que puede gustar más o menos: legítimo.
      Que quienes hayan tomado la decisión la habrán sopesado, analizado, evaluado... se supone

      Pero como ya dije en tuiter mi interés era únicamente por las razones objetivas y congruentes con la metodología y formas en/de las especificaciones de css.

      Que surgen conflictos con especificaciones de otros lenguajes: deberán analizarlo y encontar una solución conjuntamnete.
      Pero si el conflicto es con realizaciones / prácticas de terceros (preprocesadores por ejemplo) deberán ser estos últimos quienes adapten y o modifiquen su producto al estándar.

      Por cierto, Furoya, lo tuyo en twitter es sólo de miranda o tienes user (¿cuál?).

      Eliminar
    5. ¿Twitter, yo? Noo!
      140 caracteres a mí me alcanzan apenas para un saludo.

      XD

      Eliminar
  2. A mi lo que más me molesta es lo de estar con el 'var' a cuestas...

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap