Less CSS Primeros Pasos

¿Qué es Less?

LESS CSS es una ampliación de las hojas de estilo CSS, pero a diferencia de éstas, funciona como un lenguaje de programación, permitiendo el uso de variables, funciones etc.

Perfecto para programadores intrépidos…

LESS CSS no reemplaza a CSS. De hecho, el resultado final es una hoja de estilos CSS completamente funcional.

Less simplemente ofrece una maquetación más ordenada, lógica y que permite programarse en menos tiempo, indicando el nombre de la variable y su valor.

@variable: valor;
// Por ejemplo: //
@color: #333333;

Características de LESS

Variables

Con las variables podemos asignar valores que pueden ser reutilizados en cualquier parte de la hoja de estilos.

Mixins

Los mixins son clases dinámicas que pueden ser llamadas desde otras clases para acceder a su valor, y de esta forma, fusionar dos clases. Esta característica permite definir una clase con suficiente flexibilidad para modificar algunos estilos como el color o el tamaño del elemento.

Funciones de color

Las funciones de color son funciones predefinidas de Less CSS que permiten alterar un color para hacerlo más claro, oscuro, saturado, cambiarle la tonalidad, etc. Son una gran herramienta para definir una paleta de colores sin tener que buscar los códigos de color.

• lighten para aclarar un color.
• darken para oscurecerlo.
• saturate para saturar o “aumentar el color”.
• desaturate para reducir la saturación o “reducir el color”.
• fadein / fadeout para disimular tonalidad bajando transparencia.
• fade para cambiar la transparencia al 50%.
• spin para cambiar el tono del color.
• mix para mezclar dos colores.

Por ejemplo:
lighten(@color, 30%);
darken(@color, 30%);

¿Cómo se integra?

• Javascript – Servidor: a través de Javascript del lado del servidor usando node.js (Recomendado para producción).
• Javascript – Cliente: a través de Javascript del lado del cliente usando less.js (Recomendado para pruebas en local) y usando una aplicación que compile los estilos .less a .css como
  simpleless

¿Por qué Less?

Less es un lenguaje con una curva de aprendizaje media. Es sencillo conseguir que funcionen los estilos pero aprovecharlo al 100% cuesta un poquito más…

• Optimización de las horas de desarrollo.
• Mejor organización de los estilos:
  Bootstrap de Twitter trabaja con decenas de archivos less que se reducen a tres para el visitante.
• CSS Optimizado – más ligero
• Reutilización de estilos inteligente:.control{
border-radius: 4px;
border:solid 1px #aaa;
background:#eee;
}
.boton{
.control;
font-size:1em;
}
• Variables… I love it!:
  El uso de variables nos ahorra estar memorizando o copiando valores, como por ejemplo colores, nombres de fuentes, etc.
  
@rojo: #f00;
@verde: #0f0;
@blanco: #fff;.boton{
background:@rojo;
color:@blanco;
&:hover{
background: lighten(@rojo, 20%);
}
}

Mixins

Los Mixins son parte fundamental de los estilos en Less con la intención de simplificar tareas de diseño. Con Mixin podemos…

• ¿Qué se puede hacer con un Mixin?
  • Definir un estilo básico y reutilizarlo dentro de la hoja de estilos
  • Crear estilos de color
  • Combinar múltiples clases para crear una nueva clase de estilos para un elemento: podemos fusionar tres estilos generales: Estilo para el botón + Estilo para mensajes de advertencia = Botón de borrar
• ¿Cómo se crea?
  Únicamente se define una clase y se invoca desde otra clase usando su nombre seguido de punto y coma.Ejemplos:
  
.boton{
border-radius:4px;
border:solid 1px #aaa;
background:#ddd;
color:#000;
}
.rojo{
background:#f00;
color:#fff;
}
.verde{
background:#0f0;
color:#fff;
}.boton_verde{
/* Se combinan dos clases anteriores para crear una tercera */
.boton;
.verde;
}O si te lo quieres currar un poco más....boton(@fondo: #ddd, @texto: #000 ){
  border-radius:4px;
  border:solid 1px #aaa;
  background:@fondo;
  color:@texto;
  }.boton_verde{
  /* Se envian los colores como parámetros */
  .boton(#0f0, #fff);
  }

#Namespaces

Tras conocer como funcionan los Mixins utilizamos los namespaces para agruparlos y así evitar conflictos de nomenclatura (por ejemplo, dos Mixins que se llaman igual). Se trata de crear jerarquías y relaciones entre estilos.

Los Mixins son parte fundamental de los estilos en Less, ya que ayudan a simplificar las tareas de diseño. Con Mixin podemos hacer cosas como éstas…

#boton{
.aceptar{ /* ... */ }
.cancelar{ /* ... */ }
.error{ /* ... */ }
}

#alerta{
.aceptar{ /* … */ }
.cancelar{ /* … */ }
.error{ /* … */ }
}

En el ejemplo anterior podemos ver dos namespaces, #boton y #alerta. Cada uno define estilos diferentes para elementos diferentes, pero al utilizar namespace no hay conflicto con los nombres.

Utilizando el ejemplo anterior, la forma de llamar a cada uno de los estilos dentro de los namespaces sería la siguiente:

.alerta_error{
#alerta .error;
.boton{
#boton .error;
}
}


Less es organizadito

• Por sección: podemos separar nuestros estilos por secciones de nuestro portal (Portada, contacto), por frameworks o por estilos bases de reseteo. De esta forma existirá una hoja de estilo por cada sección aunque al final se mezclen en una única hoja de estilos utilizando el comando import.
  
• Paleta de colores (Mi gustar…): los colores se definen por su nombre en variables y ya está.
  
• Fuentes: viva las variables.
• Variables de referencia
  
  .panel{
background:url("@{dirImages}/fondo.jpg") repeat;
}
  Es importante aclarar que las variables se incluyen de la forma @{variable} porque están dentro de una cadena de texto.
• Y a definir
  

Ejemplo Práctico: Creando un Sprite

¿Preparados para crear nuestro primer Sprite en Less?

• Creamos la imagen: el primer paso es crear una imagen con los iconos a utilizar. En este caso la imagen es de 300x120px y cada icono ocupa 60x60px.
  
• Definimos el #namespace y Mixins para los iconos en Less: lo que se hace a continuación es definir los estilos base para los iconos, como por ejemplo la imagen que usará, etc.
  Por último incluimos el Mixin (elegir) que permitirá elegir qué icono usar únicamente por la posición que ocupa.
• Se crean dos clases más para posicionar los iconos: los iconos pueden posicionarse a la derecha o a la izquierda del texto.
  
• Por último, incluimos el Mixin que se encargará de elegir el icono dentro de la imagen: una función
  
• A jugar:
  HTML
  
  .less
  
  resultado
  

Snippets

Para iniciados el Less, los Snippets son códigos que nos ayudan a implementar Less sin necesidad de mucho conocimiento (códigos predefinidos simplemente para rellenar con nuestras propiedades).

¿Esto se utiliza?

Sí, Less Elements, Bootstrap y Foundation lo implementan y tú lo utilizas. Si no, de qué ibas a hacer webs responsive… 😉

Artículo publicado por Idento: agencia de Marketing Online especializada en Publicidad Online, Marketing Digital y Diseño Web.