Aprende Less en 15 minutos

Todos sabemos lo frustante que es picar código en CSS, sobre todo cuando se trata de proyectos serios con miles y miles de líneas de código. Terminamos duplicando las mismas reglas en todos sitios y utilizando el buscador de nuestro editor para sustituir la cadena de color cada vez que queramos cambiar el color de determinados elementos. Se necesita mucho esfuerzo y disciplina para gestionar correctamente un archivo CSS de gran tamaño. Pero no tiene por qué ser así.

Por suerte, la comunidad ha resuelto este problema. Ahora contamos con pre-procesadores de CSS tales como Less, Sass y Stylus que nos proporcionan una serie de ventajas sobre el CSS llano:

• Variables, de modo que puedes definir y cambiar fácilmente los valores a través de la misma hoja de estilo.
• Valores calculados dinámicamente. (En CSS actualmente tenemos calc, pero sólo para unidades de longitud.)
• Mixins, que te permiten reutilizar y combinar estilos. Incluso soportan pasar argumentos.
• Funciones, que te dan una serie de utilidades prácticas para la manipulación de color, conversión de imágenes a data-uris y mucho más.

El aspecto negativo de todo esto es, que si utilizas uno de estos pre-procesadores, tendrás que compilar tus hojas de estilo a CSS regular para que funcione en todos los navegadores.

Empezando con Less

Less está desarrollado en JavaScript, y necesita de Node.js o de un navegador web para funcionar. Puedes incluir less.js en tu sitio web y compilar todas las hojas de estilo .less en tiempo real, pero es una tarea lenta y, la verdad, no te lo recomiendo. Lo mejor es compilar tus hojas de estilo less antes y generar un archivo CSS para luego utilizarlo en la web. También hay una serie de programas que son capaces de compilar archivos .less, pero en este artículo vamos a tratar node.js.

Si tienes node instalado, y sabes lo que es una terminal, sigue adelante y abre una. A continuación, instala less utilizando NPM:

npm install -g less

Esto te dará acceso a utilizar el comando lessc desde cualquier terminal abierta, lo que te permitirá compilar tus archivos .less en vanilla CSS tal que así:

lessc styles.less > styles.css

Digamos que hemos escrito todas nuestras reglas de CSS con less en styles.less. Con la línea anterior, nuestro código se transformará en CSS sin formato en un fichero llamado styles.css. Todo lo que quedaría es vincular este css en nuestro HTML. Si existe un error de compilación, se mostrará en tu terminal.

Variables

Una de las principales características de less es la capacidad de crear las variables al igual que lo hace un lenguaje de programación estándar. Puedes almacenar cualquier tipo de valor que uses frecuentemente en tu hoja de estilo: colores, dimensiones, selectores, nombres de fuentes, direcciones URL y todo lo que se te vaya ocurriendo. La filosofía de less es reutilizar el código CSS todo lo que sea posible.

En este ejemplo, definimos dos variables, una para el color de fondo y otra para el color del texto, ambas contienen códigos hexadecimales:

LESS

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

CSS

p{
  background-color: #ffffff;
  color: #1A237E;
  padding: 15px;
}

ul{
  background-color: #ffffff;
}

li{
  color: #1A237E;
}

En el ejemplo anterior, el color de fondo es blanco, mientras que el texto es de color oscuro. Si, digamos, queremos cambiarlos y tener elementos oscuros con texto blanco, simplemente tenemos que cambiar los valores de las variables, en lugar de sustituirlos manualmente en la hoja de estilos.

Mixins

LESS nos permite utilizar una clase existente o un id y aplicar todos sus estilos directamente a otro selector. El siguiente ejemplo te servirá para aclarar un poco los conceptos:

LESS

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

CSS

#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

Si no quieres que el mixin aparezca como una regla de CSS puedes poner un paréntesis después de la declaración:

LESS

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

CSS

#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

Otra cosa que los mixins pueden hacer es recibir parámetros. En el siguiente ejemplo se pasa un argumento para la anchura y la altura de nuestros círculos, con un valor por defecto de 25 píxeles. Esto creará un pequeño círculo de 25 × 25 y uno grande de 100 × 100 píxeles.

LESS

#circle(@size: 25px){
  background-color: #4CAF50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#small-circle{
  #circle
}

#big-circle{
  #circle(100px)
}

CSS

#small-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 25px;
  height: 25px;
}
#big-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 100px;
  height: 100px;
}

Anidamiento y ámbito

El anidamiento se puede utilizar para estructurar una hoja de estilos de manera que coincida con la estructura HTML de una página web, al tiempo que reduces el riesgo de conflictos. He aquí un ejemplo de una lista desordenada y sus hijos:

LESS

ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

Al igual que en los lenguajes de programación, las variables de less reciben sus valores en función del ámbito de aplicación. Si el valor no está especificado en el ámbito específico, LESS lo buscará en bloques superiores hasta que encuentre la declaración más cercana.

Traducido a CSS, nuestro li tendrá el texto en color blanco, ya que hemos predefinido el @text-color en las reglas del ul

LESS

@text-color: #000000;

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  color: #ffffff;
  border-radius: 3px;
  margin: 10px 0;
}

Operaciones

También puedes hacer operaciones matemáticas básicas en los valores y colores numéricos. Digamos que queremos tener dos divs colocados uno junto al otro, siendo el segundo, el doble de ancho que el primero y con un fondo diferente.

LESS

@div-width: 100px;
@color: #03A9F4;

div{
  height: 50px;
  display: inline-block;
}

#left{
  width: @div-width;
  background-color: @color - 100;
}

#right{
  width: @div-width * 2;
  background-color: @color;
}

CSS

div {
  height: 50px;
  display: inline-block;
}
#left {
  width: 100px;
  background-color: #004590;
}
#right {
  width: 200px;
  background-color: #03a9f4;
}

Funciones

LESS también cuenta con funciones. Está empezando a parecerse cada vez más a un lenguaje de programación, ¿verdad? Vamos a echar un vistazo a fadeout, una función que disminuye la opacidad de un color.

LESS

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

CSS

div {
  height: 50px;
  width: 50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}