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:

@colorbase: red;
body{
    @colorbase: blue;
    color: @colorbase;
}
//Salida:
body{
    color: blue;
}

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:

@rutabase: "https://gamedevacademy.org/";
background-image: url("@{rutabase}/images/fondo.png");

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:

@ancho: 100px;
div{
    width: @ancho * 2;
}
//Salida
div{
    width: 200px;
}

Less diferencia las unidades usadas en cada operación:

@colorbase: #eee + #111;
//Valor de salida de @colorbase:
color: #fff;

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:

@distancia: 10px;
@size: @distancia / (8 - 3);
//Salida
@size: 2px;

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

@distancia: 10px;
margin: @distancia @distancia / 2;
//Salida
margin: 10px 5px;

Anidamiento

LESS permite anidar clases

body{
    width: 100px;
    article{
    width: 200px;
}
}
//salida
body{ width: 100px; }
body article{width: 100px; }

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

div{
    width: 100px;
    &.clase{
    width: 50px;
}
}
//salida
div{width: 100px;}
div.clase{width: 50px;}

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

a{
    color: blue;
    &:hover{
   color: red;
}
}
//salida
a{color:blue;}
a:hover{color: red;}

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.

.derecha{
    float: right;
    text-align: right;
}
div{
    width: 100px;
    height: auto;
.derecha;
}
//Salida
div{
    width: 100px;
    height: auto;
    float: right;
    text-align: right;
}

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

.contenido(@var: ''){
    content: @var;
}
div{
    display: inline-block;
    .contenido('Pandereta');
}

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

.borderradius(@a:0px, @b:0px, @c:0px, @d:0px){
    border-radius: @a @b @c @d;
}

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

[button type=”bd_button btn_large” url=”https://academy.zenva.com/product/desarrollador-web-profesional-paquete-de-6-cursos/” target=”on” button_color_fon=”#3fc2da” button_text_color=”#FFFFFF” ]Accede al curso más completo de desarrollo web[/button]