9
Oct 2013

Extensiones de CSS
y preprocesadores.

Quizás una de las tareas más tediosas de desarrollar un sitio o una aplicación web, se encuentra e la maquetación del mismo, dependiendo del tamaño del sitio, la cantidad de elementos que contenga, el comportamiento que tendrán los elementos con la interacción del usuario, las queries que hacen nuestro sitio adaptable a diversas resoluciones de pantalla y el sin fin de estilos que hagan posible que el sitio sea percibido como lo planeamos, terminaremos con un archivo CSS de unas cuantas miles de líneas de código.  Esto hace que fácilmente podamos cometer errores y sobre escribir estilos innecesariamente. Detalles que parecen insignificantes, pero afectan el tiempo que le toma al navegador aplicar los estilos correspondientes y resulta en una sensación de carga lenta. ¿De que manera podemos evitar este inconveniente?

scss

 Extensiones de CSS.

Existen herramientas como SASS y LESS, que nos permiten agregar  funcionalidades a nuestras hojas de estilo, lo cual permite que la maquetación de sitios se asemeje un poco a la programación. El objetivo de estas herramientas es generar código limpio, facilitar el mantenimiento y poder compilar código “minificado” (eliminar espacios y comentarios que son innecesarios para el funcionamiento de los estilos) de forma sencilla. En ambos casos, se trabaja un archivo con extensión “.sass” o “.scss” en el caso de SASS, o con archivos “.less”, posteriormente un preprocesador, se encarga de traducir todo a formato CSS.

En los inicios de estas herramientas, se percibió rechazo por parte de quienes diseñaban sitios web, ya que consideraban el uso de preprocesadores como “agregar un paso más a algo que ya sabían hacer correctamente”. En lo personal puedo decir que si te encuentras cómodo con tu flujo de trabajo escribiendo CSS directamente, no hay nada de malo en ello. Pero no se pierde nada con explorar estas alternativas que pueden ayudarte a mejorar el flujo de trabajo, y sobre todo, a mejorar la calidad de código que escribimos y darnos cuenta si nuestra estructura HTML es correcta.

Las funciones principales que podemos tener utilizando estas herramientas son:

Variables

Una de las cosas que carece CSS es la posibilidad de definir variables, es decir, valores que se repiten constantemente en los estilos, como colores, tamaños de fuente, márgenes. Con SASS o LESS, esto es posible, e incluso permiten definir operaciones aritméticas y aplicar el resultados a las propiedades de los elementos en cualquier parte de nuestra hoja de estilo.

//SCSS
//variables

$colorheader: #FFF06F;
$alturaheader: 80px;

header{
background-color: $colorheader;
height: $alturaheader;
}

Las variables reflejan su utilidad al momento de dar mantenimiento a nuestros estilos, en un archivo CSS si necesitamos cambiar los colores de los elementos, tendríamos que buscar todos los elementos que necesiten ser modificados. Quizás eso se podría realizar desde el editor de texto o IDE que utilicemos con la función de “remplazar todo”, pero,  ¿y si nos encontramos con estilos que usan el mismo color y no necesitan ser modificados?. Al final terminaríamos buscando elemento por elemento.

En cambio, si definimos colores con nombres de variables fáciles de identificar, bastara con modificar el valor de esa variable y sabremos que los estilos que usen ese valor serán los únicos afectados. Es práctico ya que reduce el tiempo de búsqueda y tendremos la certeza de que realizamos los cambios a los elementos necesarios.

Anidar estilos

En programación, se conoce como anidar cuando definimos operaciones dentro de otra operación, de esta manera evitamos repetir instrucciones, ya que al ejecutarse la primera instrucción las demás también lo harán. En SASS y LESS, se nos permite definir estilos dentro de otro estilo. Esta práctica se conoce como DRY ( Don’t Repeat Yourself, por sus siglas en inglés ), evitamos redundancia en definiciones y podemos decir que encapsulamos nuestros estilos en secciones bien definidas.

//SCSS
//variables

$fondomenu: #EF1C7D;
$alturamenu:70px;
$ancho-max-menu: 650px;

.menu{
background-color: $fondomenu;
height: $alturamenu;
max-width: $ancho-max-menu;
ul li{
display:inline-block;
}
}

En el ejemplo anterior, suponiendo que tenemos un menú de navegación,  en el estilo “.menu” indicamos su color de fondo, altura y el ancho máximo, además, dentro de la misma definición de estilos tenemos definido el estilo para los elementos que compongan una lista “ul li“. De esta forma anidamos estilos que pertenezcan a una sola clase, lo cual nos permite tener un mejor control sobre nuestra maquetación. A su vez, es útil para no repetir selectores y tener estilos con nombres demasiado largos.

En el caso de anidar estilos, se recomienda no tener definiciones mayores a tres niveles, es decir, en el ejemplo anterior se podría hacer lo siguiente:

//SCSS
//variables

$fondomenu: #EF1C7D;
$alturamenu:70px;
$ancho-max-menu: 650px;

.menu{
background-color: $fondomenu;
height: $alturamenu;
max-width: $ancho-max-menu;
ul li{
display:inline-block;
a{//anidamos un selector más
text-decoration:underline;
}
}
}

Pero no es recomendable seguir anidando estilos dentro del selector “a”, pues se perdería el sentido de mantener nuestra estructura simple.

Herencia

Otra característica que nos brindan estas extensiones a CSS, es la capacidad de heredar propiedades entre diferentes selectores, para así evitar definir nuevamente estilos y simplemente reutilizarlos. Para este caso se usa la función “@extend” seguido del selector del cual queramos copiar sus propiedades.

//SCSS

.redondo{
border-radius:50%;
}
.contenedor-imagen{
@extend .redondo;
height:200px;
width:200px;
}

Aquí estamos heredando a nuestra clase “.contenedor-imagen” los bordes redondeados de la clase “.redondo“, de la misma manera se pueden heredar estilos más complejos como fondos degradados, formatos de fuente, colores, dimensiones, posición, etc.

Mezclas

Una función parecida a la herencia son las “mezclas”, estas además de permitir heredar las propiedades, hacen posible compartir estilos que acepten parámetros.

@mixin contenedor-texto{
p {
text-align: center;
font-weight: bold;
}
p,a {
padding: 2px}
}

@mixin left($dist) {
float: left;
margin-left: $dist;
}

#texto {
@include left(10px);
@include contenedor-texto;
}

De esta forma nuestro identificador “#texto”, al heredar los estilos, creará la siguiente salida para CSS:

/* CSS */

#text {
float: left;
margin-left: 10px;
}
#texto p {
text-align: center;
font-weight: bold;
}
#data p, #data a {
padding: 2px;
}

Estas cuatro propiedades en conjunto nos permiten generar un archivo fácil de mantener y generar el archivo CSS que será utilizado en el servidor web. Podemos realizar modificaciones a nuestro archivo de estilos fuente (.sass, scss o .less) y cuando los cambios estén listos simplemente los compilamos en una versión optimizada que descargaran los navegadores de nuestros visitantes. Si te interesa aprender más a fondo estos lenguajes para CSS, en las páginas oficiales de las herramientas encontrarás documentación y tutoriales para aprovechar otras funciones que ofrecen, ya que aquí solo hemos mencionado las más representativas.

Si ya estas familiarizado con CSS, implementar cualquier herramienta será sencillo.

Software para preprocesamiento

Recordemos que parte importante de la optimización de sitios es brindar archivos que ocupen la menor cantidad de espacio posible, es aquí donde preprocesar nuestros estilos nos ayuda a agilizar la tarea de reducir el tamaño de nuestras hojas de estilo. Para poder realizar lo anterior requerimos de aplicaciones que se encargen de todo el proceso.

Una herramienta muy utilizada para realizar esto es Compass, la cual permite el monitoreo de  nuestro archivo fuente y al guardar los cambios automáticamente compila todo y genera el archivo CSS, esta herramienta funciona sobre la línea de comando, pero existen alternativas con entorno gráfico que nos evitan teclear instrucciones en una pantalla negra como son CodeKit en OS X y Prepros para Windows y OS X.

Ambas aplicaciones son de pago, además de trabajar con CSS, también admiten otros archivos para preprocesar javascript y HTML, optimizar de imágenes, inyección CSS a navegadores y notificación de errores. Pueden descargar las versiones de prueba, que cuentan con ciertas limitaciones pero bien permiten explorar funciones esenciales.

preprocesadores

Prepros y CodeKit.

Si no requieres de ninguna función adicional y solo quieres probar el preprocesamiento, Scout es otra herramienta que nos permite compilar archivos sin usar la línea de comando y es totalmente gratuita.

Una forma sencilla de comenzar a experimentar con estas herramientas es realizar un reemplazo general, en el sitio CSS2SASS se nos permite pegar nuestro archivo CSS y convertirlo a formato SCSS ó SASS. De esa manera puedes comparar las diferencias entre tu archivo original y el archivo para preprocesar.

Una vez más, explorar estas herramientas son opcionales y depende de si te sientes satisfecho con el flujo de trabajo que realizas emplearlas o no, si no te convence puedes regresar a trabajar directo a CSS sin problemas. Para finalizar podemos decir que el uso de preprocesadores nos dan los siguientes beneficios:

  • Agrega funciones útiles para CSS.
  • Facilita dar mantenimiento a nuestro código.
  • Evitamos repetir estilos.
  • Nos permite tener estilos mejor organizados.
  • Generan código valido para todos los navegadores.
  • Reporte de errores en código.
  • Ahorra tiempo en ciertas tareas.

Si ya las han probado, ¿les fueron de utilidad? ¿Conocen otras aplicaciones para preprocesar? Como se pueden dar cuenta los ejemplos fueron para SASS, ¿alguién usa LESS o Stylus? ¿Qué beneficios encuentran en comparación a SASS?

Por: Arturo Tadeo / Diseño web

Deja un comentario

DOTTO