¿Qué es LESS CSS? y Primeros pasos

LESS CSS es una extensión del CSS que permite agregar dinamismo al CSS tradicional; en otras palabras LESS CSS resulta en una extensión de las Hojas de Estilo en Cascadas conocidas como CSS.

¿Qué novedad trae LESS CSS que no tenga el CSS tradicional?

LESS CSS tiene características de los lenguajes de programación como lo son el uso de funciones y variables que aunque pueda sonar a "poco" resultan de una gran ayuda cuando la Hoja de Estilo en Cascada (CSS) crece.

¿Cómo se instala LESS CSS?

LESS CSS corre de ambos lados; es decir tanto del lado del cliente con JavaScript o del lado del servidor con Node.js.

¿Cómo usar LESS CSS en el lado del cliente?

Según mi opinión, la manera más sencilla de empezar a usar LESS CSS, es del lado del cliente; con solo incluir nuestra Hoja de Estilo .less; por ejemplo style.less.

<link rel="stylesheet/less" type="text/css href="less/style.less" />

Y luego incluir el less.js disponible aquí en nuestro documento HTML.

<script src="less.js" type="text/javascript"<>/script> 

¿Cómo funciona?

Simplemente, el archivo JavaScript traduce nuestra Hoja de Estilo con extensión .less (que es la que nosotros generamos) a .css momento de carga de la página.

De esta forma podemos usar LESS CSS de una manera sencilla; por supuesto, este modo sólo es recomendable para ambientes de desarrollo; para el ambiente de producción se recomienda colocar directamente el CSS ya generado por el JavaScript de LESS CSS.

¿Otras formas de usar LESS CSS?

Tenemos varias opciones para compilar los archivos .less; podemos usar programas como simpLESS; instalarlo via npm; o usar un compilador en la web como el que esta disponible en la página oficial de LESS CSS.

¿Qué ofrece LESS CSS?

Variables en LESS CSS:

Las variables en LESS CSS tiene un comportamiento similar a las constantes en cualquier lenguaje de programación; permiten especificar valores utilizados a lo largo de la Hoja de Estilo en un solo lugar; es decir, pueden ser fácilmente reutilizados en cualquier parte de la Hoja de Estilo .less. Ver más.

@variable: valor;  

Mixins en LESS CSS:

Mixins permiten incrustar todas las propiedades de una clase en otra clase con sólo incluir el nombre de la clase como una de sus propiedades, en otras palabras, permite heredar el contenido definido en el Mixins en otras clases; además de esto, permiten recibir parámetros para potenciar su uso cambiando parámetros como colores, tamaños, ect

.esquinas-redondeadas () {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
  }
  header {
    .esquinas-redondeadas;
  }  

Al compilar el código LESS anterior obtendremos:

header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
  }

Reglas internas en LESS CSS:

Permite anidar selectores dentro de otros selectores; que aunque en un inicio puede resultar un poco complicada, es una característica bastante útil, ya que permite organizar mejor el documento de Hoja de Estilo y reducir el tamaño del mismo.

    section article{
    h3 {
       color: #0BF;
       font-size: 22px;
       font-weight: bold;
    }
    p { 
      margin: 35px 0 40px 70px;
      text-indent: 0;
      a { 
        color: #0BF;
        text-decoration: none;
      }
    }
  }

Al compilar el código LESS anterior obtendremos:

 section article h3 {
    color: #0BF;
    font-size: 22px;
    font-weight: bold;
  }
  section article p {
    margin: 35px 0 40px 70px;
    text-indent: 0;
  }
  section article p a {
    color: #0BF;
    text-decoration: none;
  }

Operaciones en LESS CSS

Con las Operaciones en LESS CSS puede sumar, restar, dividir y multiplicar los valores de las propiedades como si de simple números se tratase; aunque nos suene a poco cuando diseñamos nuestra Hoja de Estilo nos daremos cuenta de que siempre hay valores que se repiten pero con distintas tonos o tamaños (por ejemplo en el pseudo class css :hover); aquí encontraremos una gran ayuda a las Operaciones de LES CSS:

@azul: #0BF;;
a {
  color: (@azul * 3);
}   

Al compilar el código LESS anterior obtendremos:

a {
    color: #00ffff;
  }     

Conclusión

LESS CSS es una poderosa herramienta muy utilizada y que facilita al momento de desarrollar las Hojas de Estilo en Cascada a nuestra aplicación web, páginas web, etc; que como he venido diciendo, facilita y permite organizar enormemente las Hojas de Estilo en Cascada.

¿Cómo usar las Variables en LESS CSS?

Si has trabajado aunque sea un poco con Las Hojas de Estilo en Cascada (CSS) es muy probable que hayas realizado algo como lo siguiente:

.clase1 {  
    background: #000;  
}  
.clase2 {  
    background: #FFF;  
    color: #000;  
}  
.clase3 {  
    border: 1px solid #000;  
	color: #F00; 
} 

Claramente, vemos que existen valores repetidos a lo largo del CSS anterior; si quisiéramos cambiar (por ejemplo) el color negro (#000) por algún otro color como rojo (#F00) tendríamos que aplicar el cambio en tres sitios distintos (para nuestro ejemplo).

Las Variables en LESS CSS

La cosa se complica bastante cuando la Hoja de Estilo crece y quisieras hacer un completo cambio en la misma; para esto LESS CSS nos ofrece el uso de las Variables.

Las Variables en LESS CSS funcionan exactamente como cualquier variable en cualquier lenguaje de programación habido y por haber; es decir, las variables permiten especificar los valores utilizados en un solo lugar y poder utilizarlos a lo largo de la Hoja de Estilo, esto trae como ventaja que los cambios globales pueden resolverse tan fácilmente como cambiar una línea de código; el valor de la variable en sí:

@color: #000;  
  
.clase1 {  
    background: @color;  
}  
.clase2 {  
    background: #fff;  
    color: @color;  
}  
.clase3 {  
    border: 1px solid @color;  
	color: #F00; 
} 

Al compilar el código LESS anterior obtendremos:

.clase1 {
  background: #000000;
}
.clase2 {
  background: #fff;
  color: #000000;
}
.clase3 {
  border: 1px solid #000000;
  color: #F00;
}

Valores de las Variables en LESS CSS

Podemos definir las Variables de LESS CSS prácticamente con cualquier valor:

@color: 1px solid black;  
  
.clase1 {  
   border: @color;  
}  
.clase3 {  
  border: 1px solid @color;  
	color: #F00; 
} 

Al compilar el código LESS anterior obtendremos:

.clase1 {
  border: 1px solid #000000;
}
.clase3 {
  border: 1px solid 1px solid #000000;
  color: #F00;
}

Incluso texto:

@contenido: "mi contenido";  
  
.clase1.before {  
  content: @contenido
} 

Al compilar el código LESS anterior obtendremos:

.clase1.before {  content: "mi contenido"; }

Variables como valores para las Variables en LESS CSS

También es posible definir las variables con un nombre de la variable:

@contenido: "mi contenido";  
@agregado: "contenido";
  
.clase1.before {  
  content: @@agregado;
} 

Al compilar el código LESS anterior obtendremos:

.clase1.before {
  content: "mi contenido";
}

¿Cómo usar las Mixins en LESS CSS?

Muchas veces cuando trabajamos con las hojas de estilo tenemos que repetir reglas CSS por todo el documento:

header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
section {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Esto se convierte en un verdadero dolor de cabeza cuando la Hoja de Estilo crece o si decidimos cambiar algunas reglas CSS; ya que tuviéramos que revisar toda la Hoja de Estilo y realizar dicho cambio, como por ejemplo si decidiéramos ya no utilizar bordes redondeados o cambiarle las medidas a dicha propiedad.

Los Mixins de LESS CSS

Con los Mixins de LESS CSS podemos incrustar todas las propiedades de una clase en otra clase con sólo incluir el nombre de la clase como una de sus propiedades; funciona de forma muy parecida a las variables pero con clases enteras; si quisiéramos generar las reglas de arriba, podriamos hacer algo como esto:

.esquinas-redondeadas () {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
.clase-x () {
  background: #333;
  width:100%;
  margin:0;
  height: auto;
}
header {
  .esquinas-redondeadas;
  .clase-x
}
footer {
  .esquinas-redondeadas;
  .clase-x
}
section{
   .esquinas-redondeadas;
}

Esta es una de las propiedades más interesantes que nos brinda LESS CSS ya que permite heredar el contenido de estas clases a otras clases y así evita la repetición de reglas CSS y organizar la Hoja de Estilo.

Los Mixins de LESS CSS con pase de parámetros

Ahora bien para nuestro pequeño ejemplo, ¿Qué pasa si queremos que las medidas de los bordes del header sean distintas a las del footer?

Podemos hacer algo como esto:

.esquinas-redondeadas (@radio:5px) {
  -webkit-border-radius: @radio;
  -moz-border-radius: @radio;
  -ms-border-radius: @radio;
  -o-border-radius: @radio;
  border-radius: @radio;
}
.clase-x () {
  background: #333;
  width:100%;
  margin:0;
  height: auto;
}
header {
  .esquinas-redondeadas(10px);
  .clase-x
}
footer {
  .esquinas-redondeadas;
  .clase-x
}
section{
   .esquinas-redondeadas;
}

Al compilar el código LESS anterior obtendremos:

header {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
section {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Como vimos en este último ejemplo, los Mixins en LESS CSS también pueden comportarse como funciones, y tomar argumentos lo que permite potenciar su funcionamiento.