Tutorial de Less Español

Cómo usar LESS desde Cero

¿Qué es Less.js?

Less es un preprocesador para CSS.

  • Nos permite trabajar con hojas de estilo con funcionalidades de un lenguaje de programación.
  • Existen otros preprocesadores como SASS o Stylus, aunque sólo LESS.js se puede integrar desde el front.

Sus principales ventajas son:

  • Nos permite ser más productivos
  • Ayuda a organizar mejor nuestras hojas de estilo y a la compatibilidad entre navegadores.
  • El código que generamos es reutilizable

Instalación y uso

  1. Descargar el archivo de http://lesscss.org/
  2. Cargar dentro del head de la página el archivo .css o .less. No importa la extensión pero hay que indicar el atributo ‘rel’ como stylesheet/less

Después hay que llamar al script:

Less.js funciona en servidor, ya sea remoto o local

 Los principales aspectos de Less

  • Variables
  • Operaciones
  • Anidamiento
  • Mixins
  • Funciones

Variables

En realidad se trata de constantes. Las variables se definen de la siguiente forma:
@size: 100px;
@color: #ff3;
@ruta: ‘images/background.gif’;

Las variables en Less pueden tener ámbito global o local:

Las variables del tipo string se pueden embeber dentro de otra cadena de manera similar a como se hace en PHP, es decir, mediante llaves:

En ocasiones encontraremos expresiones no reconocidas por CSS (por ejemplo los filtros de IE). En este caso y para evitar errores usaremos el carácter de escape ‘~’ para evitar que esa sentencia se trate:

filter: ~”ms:alwaysHasItsOwnSyntax.For.Stuff()”;
//Salida
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

Operaciones

Las variables son susceptibles de operaciones:

Less diferencia las unidades usadas en cada operación:

La jerarquía de las operaciones es la común en cualquier lenguaje de programación:

*, /, +, –

Podemos alterar esta jerarquía mediante el uso de paréntesis:

Podemos usar operaciones dentro de una sentencia shorthand siempre que separemos por espacios:

Anidamiento

LESS permite anidar clases

Para indicar que concatenamos en lugar de anidar usamos el operador &:

Esto también se aplica para propiedades como :hover, :active, :visited…

Mixins

Tal vez el aspecto más interesante de Less son los Mixins, es decir, conjuntos de reglas que se pueden anidar dentro de otras reglas. Su funcionalidad es similar a la de una función.

Similar a las funciones, los mixins pueden recibir parámetros:

Se pueden enviar y recibir varios parámetros siempre que en la definición del mixin se separen por comas:

Los operadores usables para las condiciones when son ‘<', '>‘, ‘<=', '>=’ e ‘=’.

En algunos casos queremos evaluar que se cumplan una expresión entre varias o varias expresiones a la vez. Separaremos entonces cada condición por una coma que funcionaría a modo de operador “or” o usaremos “and”:

.mixin (@a) when (@a > 10), (@a < -10) { ... } // Si se cumple que @a es mayor que 10 o menor de -10 se carga el mixin. .mixin (@a) when (@a > 10) and (@a < -10) { ... } // Sólo si se cumple que @a es mayor que 10 y es menor de -10 se carga el mixin. Por último usaremos la palabra clave "not" si queremos negar una condición: .mixin (@a) when not (@a = 10) { ... } // Si se cumple que @a es distinto de 10 se carga el mixin.

Funciones matemáticas

Existen además una serie de funciones matemáticas:
Round redondea por aproximación
round(1.2); // Salida, 1
round(1.51); // Salida 2
ceil(2.2); // Redondea al alza –> 3
floor(2.9); // Redondea a la baja –> 2

Conviértete en un desarrollador web profesional

Accede al curso más completo de desarrollo web

Publicado por

Klinsmann Fabian

Desarrollador web y ninja Front-end. Klinsmann es licenciado en Marketing y Neuro Marketing Digitales, apasionado por las ultimas tecnologías, lleva mas de 3 años trabajando con HTML5, CSS3, jQuery, Responsive design y todo lo que tiene que ver en la web.

Share this article

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz