Todo diseñador o desarrollador web que se precie habrá trabajado con CSS. Las hojas en cascada son el alma del diseño de páginas, un repositorio ordenado (o al menos legible) de definiciones de estilos que dotan a ese estático html de dinamismo y carácter.

less-css-pagina

Hay mucho arte detrás del buen diseño de un CSS. Muchos trucos que vas poco a poco aprendiendo y agregándolos a tu rutina diaria, adaptándolos a las nuevas versiones y requisitos de un mundo multipantalla. Todos acabamos por coger manías, modos de aproximación a la lógica de la presentación que se alejan de las buenas prácticas, y que en el día de mañana, pueden traernos más de un dolor de cabeza

Si alguna vez os habéis enfrentado a un desarrollo externo, o habéis tenido que reestructurar el diseño de una web de hace unos años, sabréis a qué me refiero.

Una labor que aparentemente debería resultar más sencilla (parte del trabajo se supone que ya está hecho), se vuelve épica (qué significa este estilo, por qué declararía varias veces esto, aquí no hay quien se entere de nada,…).

El CSS es muy potente, en tanto en cuanto permite crear  la presentación semántica con cuatro palabras correctamente escritas y un par de nomeclaturas a tener en cuenta, pero lo cierto es que se queda corto como lenguaje, al no aprovechar aquellos avances que otros sí han adaptado a sus necesidades, como funciones, variables, herencia y anidamientos.

Es ahí donde cobra sentido los preprocesadores de CSS, como una herramienta que dota de todo aquello que el lenguaje CSS no cuenta y que sí tenemos en lenguajes «más avanzados» como C++ o java.

¿Por qué debería trabajar con CSS preprocesado?

La respuesta es sencilla. Un código LESS, SASS o Stylus es muchísimo más sencillo de mantener (menos horas de trabajo, menos costes) que un CSS en bruto. Pasada la curva de aprendizaje, se escribe más rápido y funciona igual, por lo que optimizas el flujo de trabajo.

La curva de aprendizaje puede ser moderada para un diseñador web (sin conocimientos técnicos), pero si eres desarrollador, no tienes excusa. No te vas a encontrar nada nuevo que no hayas visto en lenguajes de alto nivel, sino que únicamente tendrás que acostumbrarte a su nueva nomeclatura.

Vale, me has convencido ¿Qué alternativas tengo?

Existen muchos preprocesadores CSS en internet, aunque sin duda los tres que más han dado que hablar son LESS, SASS (SCSS en su nueva versión) y Stylus.

Elegir entre uno u otro es más una cuestión personal que otra cosa. LESS y SASS llevan ya años con nosotros, mientras que Stylus es un recién llegado que apunta muy alto. Se diferencian básicamente en la nomeclatura usada, ya que los tres tienen más o menos las mismas características, llamando quizás la atención Stylus o SASS, que eliminan elementos ya clásicos del CSS como es el punto y coma, los corchetes, el punto y la almohadilla, quedando un texto plano que depende de su buen tabulado para ser comprensible. Por otro lado, LESS y SCSS mantienen buena parte de la estructura del CSS puro, lo que puede ayudarnos a familiarizarnos más rápidamente con ellos.

Un servidor se ha decantado por LESS (de hecho en esta entrada descubriremos qué es eso del preprocesamiento CSS de mano de LESS), principalmente porque es el elegido por Bootstrap (los chicos de Twitter no tienen que ser tontos), y creo que es de los tres el que menos curva de aprendizaje tiene, pero vamos, que tanto SASS (o SCSS) como Stylus son fantásticas elecciones.

Primeros pasos con un preprocesador de CSS

Cuando trabajas con el preprocesado de CSS, trabajaras con unos archivos con extensión distinta al ya habitual .css, en el caso de LESS, archivos .less.

El navegador de por sí no comprende este tipo de archivos (y es posible que tu editor de texto, sino está convenientemente configurado, tampoco), por lo que existen dos maneras de incrustarlos en una página web.

  • La primera la comentaré únicamente de manera anecdótica, y no la recomiendo en ninguno de los casos. Se trataría de importar el archivo dentro de la cabecera del HTML como hacemos con los ficheros CSS, y mediante JavaScript, haríamos en preprocesado en el cliente. He dicho que no la recomiendo, y mis razones tengo. JavaScript se está usando cada día más, y raro es el usuario que lo tiene desactivado por defecto, pero sí nos atenemos a lugares de trabajo o de estudio, podemos encontrarnos con que sí esta desactivado, y en tal caso, mostraría una página en blanco.
  • La otra alternativa es la que todo el mundo usa, y es tener un compilador a CSS instalado en su editor de texto, de tal forma que una vez hacemos una modificación en nuestro fichero .less (por ejemplo), nos genera un .css. Usaremos la llamada al CSS habitual dentro de la página, ya que al cliente le enviamos un fichero totalmente entendible por los navegadores. Sobre qué editor usar entonces, un servidor hace tiempo que se decantó por Sublime Text 2, del que ya tenéis un tutorial en el que explico cómo configurarlo para trabajar con ficheros LESS (en el caso de SASS, sería más de lo mismo).

¿Qué ganamos? Variables

CSS no tiene variables, algo que sí existen en casi todos los lenguajes de programación actuales, y permite simplificar el código, y por tanto el tiempo de trabajo.

Imagínate que queremos aplicar un color a varios elementos distintos. En CSS escribiríamos el color cada vez:

nav { background-color: #aaa;}
h3 { color: #aaa; }
.struct { color: #aaa; }
Mientras que en LESS crearíamos una variable inicial @color-usado y la referenciaríamos en cada estilo que se precisase:

@color-usado: #aaa;
nav { background-color: @color-usado;}
h3 { color: @color-usado; }
.struct { color: @color-usado; }

¿Qué ganamos? Anidamientos

Con CSS, nos encontramos que muchas veces tenemos que definir estilo para clases e ids del mismo objeto, con lo que toca definir cada estilo por separado:

ul {}
ul li {}
ul li a {}

En LESS (y en general en cualquier lenguaje de preprocesamiento de CSS), podemos crear anidaciones, de tal forma que un código como el anterior, queda tal que así:
ul {
li {
a {}}}

¿Qué ganamos? Pseudoclases

En los lenguajes de preprocesamiento es posible crear pseudoclases para hacer llamadas a elementos anteriores.

El ejemplo más común es el de definir un estilo para diferentes estados de un enlace:

a:hover {}
a:active {}
a:visited {}

En LESS usaremos & para referenciar el objeto anterior, de tal forma que el código nos queda tal que así:

a {
&:hover {}
&:active {}
&:visited {}
}

¿Qué ganamos? Mixins (herencia de clases)

Ahora empieza lo bueno.

¿Cuántas veces has tenido que copiar y pegar trozos de propiedades en diferentes puntos? Pues con LESS (o el lenguaje de preprocesado CSS elegido), esta acción es tan sencilla como crear un mixin inicial con las propiedades (se usa el punto, como si de una clase se tratase).

Código CSS:

.nav1 {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav2 {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Código LESS:

.bordes {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav1 {
.bordes;
}
.nav2 {
.bordes;
}

¿Qué ganamos? Mixins con argumentos

El potencial de un mixin va mucho más allá. Ya no solo permite heredar propiedades dentro de una clase o id, sino que permite meterle argumentos, como si de una función de C o Java se tratase.

Un posible ejemplo es el de necesitar definir un grupo de propiedades iguales en distintos elementos, con la particularidad de que el color cambia en cada uno de ellos. El código CSS sería algo tal que así:

.nav1 {
border-radius: 3px;
position:absolute;
}
.nav2 {
border-radius: 5px;
position:absolute;
}

Pero en LESS, nos quedaría de la siguiente manera:

.bordes (@radio:5px) {
border-radius: @radio;
position:absolute;
}
.nav1 {
.bordes(3px);
}
.nav2 {
.bordes;
}

Como veis, se usan los paréntesis para definir los argumentos, que pueden ser uno o varios, según necesidades. A la hora de llamar al mixin, podemos no inicializar los argumentos (se cogería por tanto el valor por defecto) como hemos hecho en .nav2 o bien inicializarlo a otro valor, como en .nav1.

Seguramente se te están ocurriendo mil y un usos alternativos para esta característica, y lo cierto es que es tan potente que corremos el peligro de crear infinidad de mixin para cada uso. Por eso usarlo sabiamente, y cuando haga falta.

¿Qué ganamos? Operaciones

CSS no contempla el uso de operarios, algo que sí encontraremos en LESS, y que nos permite escribir de forma sencilla casos en los que por ejemplo el margen dependa de otro margen (que nos obligaría a cambiar cada valor a mano siempre que se modificase el primero).

Código CSS:

.base{margin: 5px;}
.nav { margin: 35px; }

Código LESS:

@base-margin: 5px;
.base{margin: @base-margin; }
.nav {margin: @base-margin + 30px; }

Y hasta aquí puedo contar. Es posible que me haya olvidado de alguna característica, pero llevo relativamente poco aprovechándome del preprocesado CSS, y hasta ahora con esto he podido hacer maravillas. Cualquier sugerencia es bienvenida. Muchas gracias.

Otros artículos relacionados