¿Qué es LESS CSS?

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.

LESS tiene muchas características que lo hace especial y en combinadas resultan en muchas más; en las siguientes entradas sobre LESS CSS veremos sus principales características.

¿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: Ver más.

.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.