LESS CSS vs CSS

Este artículo es continuación de la serie uptoeleven: less css, de febrero. Puedes ver el primer artículo de la serie en: Qué es Less CSS y cómo funciona.

LESS CSS no es un lenguaje complicado, sin embargo, tiene una curva de aprendizaje mediana, conseguir que los estilos funcionen es bastante rápido pero llegar a aprovecharlo al 100% toma un poco más de tiempo.

Entonces la pregunta es ¿Por qué usar Less CSS si ya existe CSS?

Mejoras rápidas con poco trabajo

Less CSS está desarrollado a partir de CSS por lo que la sintaxis es bastante similar, tanto que puedes mezclar archivos CSS con archivos de LESS sin problema. Puedes combinar la mitad de un estilo con la mitad de otro.

Esto permite migrar estilos CSS rápidamente y luego irlos mejorando eventualmente con las ventajas de Less. Además el enfoque del lenguaje es ahorrar trabajo por lo que existen muchos atajos y en resumen el tiempo de desarrollo se reduce, y los resultados se amplifican.

Mejor organización en desarrollo

Dentro de las caracteristicas de Less encontramos uso de variables, namespaces, mixins e importación de hojas de estilo externas (igual que CSS). Esto reunido en un solo lenguaje permiten que desde el punto de vista de desarrollo podamos reutilizar estilos, definir reglas, paletas de colores e incluso mantener nuestra propia politica para crear estilos. Literalmente podemos trabajar con «librerías de estilos» por separado y al final ofrecerle al visitante un único archivo CSS compilado, comprimido y funcional.

Optimización de estilos CSS

Al compilar LESS CSS con una aplicación como Simpless o Less.app podemos definir la opción de que comprima el archivo, de forma que la hoja de estilos final ocupe el menor espacio posible.

Reutilización de estilos

Los mixins de Less permiten reutilizar estilos, de forma que podemos definir un clase con estilos redondeados y luego invocarlas en diferentes clases para duplicar el estilo.

.control{
  border-radius: 4px;
  border:solid 1px #aaa;
  background:#eee;
}

.boton{
  .control;
  font-size:1em;
}
.panel{
  .control;
  padding:.5em;
}

El estilo anterior da como resultado que la clase botón y panel obtengan bordes redondeados, bordes y fondo gris de la clase control sin necesidad de escribirlo dos veces.

Funciones aritmeticas

Esta caracteristica es simplemente genial, podemos definir propiedades utilizando operaciones aritmeticas para ahorrarnos tiempo con la calculadora (o los dedos :p )

p{
 font-size: 18/16em; // da como resultado font-size:1.125em
}

 Variables

El uso de variables nos ahorra estar memorizando o copiando valores, como por ejemplo colores, nombres de fuentes, etc. En CSS cada vez que necesitamos un color debemos recordar el código exacto mientras que con LESS solo debemos recordar el nombre de la variable. En el siguiente ejemplo defino el color de un botón usando variables, y usando una función de color le indico que al posicionar el puntero encima cambie el color rojo por uno más claro (función lighten al 20%).

@rojo: #f00;
@verde: #0f0;
@blanco: #fff;

.boton{
  background:@rojo;
  color:@blanco;
  &:hover{
    background: lighten(@rojo, 20%);
  }
}

Más información

Enlace: Documentación de LESS (inglés) | http://lesscss.org/#-variables