css, diseño, Diseño Web, html, Informacion, javascript, less, web

LESS CSS – Guía para principiantes

less

El lenguaje CSS es simple de usar y aprender, sin embargo, tiene una serie de limitaciones, en especial cuando hablamos sobre el mantenimiento del código. Por ejemplo, cuando tenemos varios cientos o miles de líneas de código y además separados en diferentes ficheros, la cosa se puede volver ¿un poco? caótica.

Para solucionar este problema se crearon los pre-procesadores de CSS. Los pre-procesadores CSS nos permiten crear hojas de estilo de una manera dinámica. Existen varios, pero en este artículo nos vamos a ocupar de uno de los que ha tenido mayor impacto, LESS.

Vamos a ver algunas de las características que nos proporciona LESS y que nos facilitan muchos las cosas cuando estamos trabajando con hojas de estilo CSS. Para profundizar más en el uso de LESS te recomiendo que leas la documentación oficial disponible en Español e Inglés.

Usando LESS

Usar LESS es realmente sencillo. Únicamente tenemos descargar LESS desde la página oficial en GitHub. A continuación añadimos las dos siguientes líneas en nuestra plantilla HTML: 

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

El fichero less.js es el fichero que hemos descargado y el fichero styles.less es el fichero en el que vamos a escribir nuestro código LESS.

Sintaxis de LESS

A diferencia del lenguaje CSS, LESS se parece más a un lenguaje de programación. Es un lenguaje dinámico, lo que quiere decir que encontraremos elementos como Variables, Operaciones o Ámbito.

Variables

Comencemos con las variables. Cuando creamos una hoja de estilo CSS es muy común que aparezca la siguiente estructura: 

.class1 {  
    background-color: #0868d5;
    padding-left: 10px;
}  
.class2 {  
    background-color: #fff;  
    color: #0868d5;  
}  
.class3 {  
    border: 1px solid #0868d5;  
}

Como vemos estamos repitiendo varias veces el valor #0868d5 y lo más probable es que lo sigamos repitiendo durante el resto de la hoja de estilo. Destacar que este código no está mal, ya que es la única manera que nos proporciona CSS. Si usamos LESS, podremos definir variables que nos permitirán almacenar valores que podrán ser reutilizados durante toda la hoja de estilo. 

@color: #2d5e8b; 

.class1 {  
    background-color: @color;
    padding-left: 10px;
}  
.class2 {  
    background-color: #fff;  
    color: @color;  
}  
.class3 {  
    border: 1px solid @color;  
}

En el ejemplo, hemos definido una variable @color que almacena el valor #2d5e8b. Ahora si queremos cambiar el color, simplemente modificamos el valor de la variable @color y el cambio se aplicará en toda la hoja de estilo.

Podemos asignar a una variable LESS cualquier valor válido en CSS, por ejemplo: 

@align-base: top;
@font-style: bold;
@opacity: 0.7;
@transition: ease;

Mixins

En LESS está permitido el uso de mixins, lo cual da mucha potencia al lenguaje. Los mixins nos permiten incluir reglas dentro de otras. Por ejemplo, tenemos la siguiente regla:

.bordered {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Si ahora queremos añadir las reglas de la clase .bordered en otra regla, simplemente hacemos lo siguiente:

.box {
    border: 1px solid #555;  
    color: #111;
    .bordered;
}

Al incluir la clase .bordered dentro de la clase .box hará que esta última herede las propiedades definidos dentro de la primera. De tal manera que la hoja de estilo CSS generada será la siguiente: 

.box {
    border:  1px solid #555;
    color: #111;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Podremos incluir cualquier selector de clase o id dentro de otro. Además podremos realizar importaciones de distintas hojas de estilos LESS. Por ejemplo, podemos usar LESS Elements que nos proporciona una hoja de estilos con un conjunto de los mixins CSS3 más usados. Descargamos la hoja de estilo y añadimos la siguiente sentencia de importación en nuestra hoja de estilo: 

@import "elements.less";

Ahora podremos usar cualquiera de los mixins definidos en la hoja de estilo elements.less, por ejemplo, para redondear los bordes 5 píxeles a los elementos div simplemente hacemos referencia al mixin correspondiente: 

div {  
    .rounded(5px);  
}  

Anidamiento de operaciones

Cuando escribes una hoja de estilo CSS es muy común que aparezca la siguiente estructura: 

nav {  
    height: 40px;  
    width: 100%;  
    background: #278fcc;  
    border: 2px solid #cc273c;  
}  
nav li {  
    width: 600px;  
    height: 40px;  
}  
nav li a {  
    color: #fff;  
    line-height: 40px;  
    text-shadow: 1px #cc273c;  
}

Lo que hacemos es definir el estilo de los elementos hijos del elemento nav indicando al inicio de cada una de las reglas de los elementos hijos el nombre del elemento padre. Podemos considerar esta práctica en contra del principio DRY, ya que estamos repitiendo datos.

En LESS podemos simplificar las reglas anteriores anidando los elementos hijos dentro del padre: 

nav {  
    height: 40px;  
    width: 100%;  
    background: #278fcc;  
    border: 2px solid #cc273c;  
		li {  
    	width: 600px;  
    	height: 40px;  
		  a {
        color: #fff;  
        line-height: 40px;  
        text-shadow: 1px #cc273c; 
    }
  }
}

Operaciones

LESS nos permite realizar operaciones como por ejemplo sumas, restas, multiplicaciones o divisiones de números, colores o variables definidas en la hoja de estilo. Las operaciones deben ser definidas entre paréntesis. Vamos a ver a continuación un par de ejemplos: 

@base-color: #cc273c;
@filler: 50px;

.class1 {
    background-color: @base-color;
    margin: @filler;
}

.class2 {
    background-color: @base-color + #111;
    margin: @filler - 10;
}

Hemos definido dos variables @base-color y @filler, en la primera clase hemos asignado estas variables a dos atributos, pero en la segunda hemos operado sobre ellas para modificar su valor. La hoja de estilo CSS que se generará será la siguiente: 

.class1 {
    background-color: #cc273c;
    margin: 50px;
}
.class2 {
    background-color: #dd384d;
    margin: 40px;
}

Si nos fijamos en la clase .class2, a la variable @filler le sumamos un valor sin especificar una unidad, mientras que @filler tiene asignado el valor 50px, LESS usará la unidad especificada en la variable @filler en el resultado final, 40px en este caso.

Ámbito

El ámbito de las variables en LESS es similar al de la mayoría de los lenguajes de programación. Las variables y los mixins se buscan primero en el ámbito local, si no son encontrados, se empezará a buscar en el ámbito inmediatamente superior, y así sucesivamente. Por ejemplo: 

@var: red;

#page {
    @var: white;
    #header {
        color: @var; // white
    }
}

#footer {
    color: @var; // red
}

El color en el elemento #footer será red y en #header será white, ya que el valor de la variable es sobrescrita en el elemento #page.

Herramientas

Vamos a ver a continuación una lista de herramientas que pueden resultar muy útiles para el desarrollo de estilos usando LESS: