OmbuShop Crea Tu Tienda Online

Artículos para el mes: diciembre, 2013

Variables y cálculos en CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Se acerca el momento en que podremos utilizar variables, cálculos y otros benficios de los preprocesadores, de forma nativa en los navegadores y con CSS estándar.

El problema

El lenguaje CSS nació como una tecnología simple y elegante que vino a posibilitar la separación de la presentación —el diseño— y el contenido HTML de una página web.

En los últimos años se ha complejizado mucho el diseño de los sitios web. Nuevas propiedades y posibilidades, acompañadas de la aparición del diseño web responsive (RWD), generaron un gran debate en cuanto a cómo organizar una hoja de estilos CSS de forma tal que pueda ser mantenida a futuro sin generar la locura de diseñadores y desarrolladores.

Una posible solución: preprocesadores

Más allá de ciertas metodologías (OOCSS, por ejemplo) para la organización del código CSS, los preprocesadores de CSS se convirtieron en parte importante de la solución a este problema.

Sass and Less

Sass – Less

SASS y Less son los preprocesadores de CSS más populares. Agregan funcionalidades tales como variables, funciones, mixins y herencia, todas faltantes en el código CSS, pero no por mucho tiempo.

Cambios en CSS nativo

Todos estos cambios motivaron la discusión acerca de si sería lícito incluir algunas de las funcionalidades de SASS y Less al código CSS nativo, permitiendo a los navegadores interpretar dicho código de forma directa.

Uno de los avances más importantes se ha dado en el terreno de la definición de variables y la posibilidad de hacer cálculos. El Firefox en su versión Nightly Build 29, ya incluye soporte para definición de variables y cálculos en CSS de forma nativa en el navegador.

Podremos hacer cosas como éstas en nuestro código:

:root {
var-theme-colour-1: #009EE0;
var-spacing: 24px;
}
h1 {
color: var(theme-colour-1);
padding: var(spacing);
margin: calc(var(spacing) * 2);
}

Uso de variables que antes resultaba imposible sin la ayuda de preprocesadores.

Esperamos que estas nuevas posibilidades del CSS puedan ser usadas prontamente de forma nativa en todos los navegadores populares, así podremos utilizarlas en nuestras tiendas!