Less CSS es un lenguaje multiplataforma y de código abierto de hojas de estilo dinámico, se puede ejecutar en el lado del cliente con Javascript o en el lado del servidor con Node.js, a diferencia de CSS, LESS funciona como un lenguaje de programación, permitiendo el uso de variables, funciones, mixins y operaciones aritmeticas.
El objetivo de LESS no es reemplazar CSS, LESS aporta mejoras avanzadas, compresión y productividad en nuestros trabajos de maquetación

Uso de LESS en local

Para usar LESS en local descarga LESS.js en este enlace y guardalo con el nombre por defecto “less-1.7.0.min.js” en la carpeta raiz del proyecto, en la cabecera de tu documento principal y enlaza las hojas de estilo de la siguiente forma

<head>
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less-1.7.0.min.js"></script>
</head>
style.less será la hoja de estilos de nuestro proyecto y less-1.5.0.min.js será el script que enlazamos al archivo que hemos descargado anteriormente en la página oficial de LESS, la hoja de estilos debe añadirse antes que el script.
Utiliza Firefox para tus desarrollos en local con LESS, no todos los navegadores tienen soporte para LESS

Uso de LESS en el lado servidor

Aconsejo el uso de LESS como una herramienta de desarrollo, no como una herramienta funcional para el lado cliente, con un compilador como Simpless, puedes convertir fácilmente un archivo con extensión .less a .css , es ideal para finalizar nuestro proyecto y evitar problemas de compatibilidad con navegadores.
Puedes descargar Simpless en este enlace.
Existen otros compiladores para Windows como Winless
Otra opción es LessPHP, una librería que compila LESSgenerarando estilos dinámicamente en tiempo real.

Variables

Uno de los problemas de CSS es que no podemos utilizar variables, en LESS podemos hacer uso de las variables de forma muy similar al uso de variables en otros lenguajes de programacion, estas nos permiten definir un valor en un solo lugar y usarlo en multiples partes de nuestro codigo.
Las variables en LESS se declaran con el símbolo @ seguido de nombre:valor.
Ejemplo:
@colorclaro:#FAFAFA;
h1 {
background-color: @colorclaro;
}
h2 {
color: @colorclaro;
}
h3 {
border-color: @colorclaro; 
}
Con la variable @colorclaro hemos asignado el mismo color a h1 en el fondo, a h2 en el texto y a h3 en el borde, podemos usar esta variable en cualquier parte del codigo y cuantas veces necesitemos, como en otros lenguajes de programación las variables que se declaran dentro de un selector son como variables locales y solo afectan al selector en el que han sido declaradas.
Ejemplo:
@colorazul: #184583; 
h1 { 
color: @colorazul; 
} 
h2 { 
@colorazul: #3399CC; 
color: @colorazul; 
}
En el ejemplo anterior h1 obtiene el color #184583 que ha sido declarado como si fuera una variable global, en el selector h2, este obtiene el color #3399CC, que es el valor que se ha declarado dentro de este selector (como si fuera una variable local). Muy importante, no se puede llamar a una variable declarada dentro de un selector (como si fuese local) desde otro selector.
Ejemplo
h1 { 
@colorazul: #3399CC;
color: @colorazul; 
} 
h2 { 
color: @colorazul; 
}
El ejemplo anterior nos daría un error, el valor la propiedad de h2 no estaría definido.

Mixins

Los Mixins en LESS son como las funciones en otros lenguajes de programación, podemos generar un estilo y repetirlo en multiples selectores
Ejemplo:
.estilocajas() { 
width: 100%;
background-color: #CCCCCC;
color: #333333;
border-radius:5px;
box-shadow: 1px 1px 1px #000000;
}
header {
.estilocajas;
height: 200px;
}
section {
.estilocajas;
height: 500px;
}
footer {
.estilocajas;
height: 100px;
}
En el ejemplo anterior, header, section y footer obtendrian los mismos valores de ancho, fondo, color de texto, bordes redondeados y color de sombra, la altura se ha definido de forma diferente para cada selector
Con los mixins podemos ademas pasar parametros vacios o pasarles un valor al parametro por defecto.
Ejemplo con un parametro sin valor
.bordesredondos(@valor) {
border-radius: @valor; 
}
div { 
.bordesredondos(5px); 
}
En el ejemplo anterior se ha creado un mixin y se le ha pasado un parametro vacio, cada vez que se le llame con un selector, tenemos que pasarle un valor.
Ejemplo con un valor por defecto
.bordesredondos(@valor:5px) {
border-radius: @valor; 
} 
section { 
.bordesredondos;
} 
article { 
.bordesredondos(10px);
}
En el ejemplo anterior el selector section obtiene el valor por defecto(5px), ya que no se le ha pasado al parametro un valor, el selector article obtiene el valor que le hemos pasado al parametro(10px)

Reglas anidadas

En LESS puedes anidar selectores dentro de otros selectores, gracias a esto podemos crear hojas de herencia claras, en lugar de construir largos nombres de selector para especificar la herencia.
Ejemplo
header {
h1 {
color: #184583;
}
h2 { 
color: #CCCCCC;
}
}
Este ejemplo muestra que solo las etiquetas h1 y h2 que se encuentran dentro de header, obtendran un color de texto #184583 y #CCCCCC respectivamente.
Un ejemplo mas complejo:
#header {
h1 {font-size: 24px; font-weight: bold;}
p {font-size: 12px;
a {text-decoration: none;
&:hover {color: #555555;}
}
}
}

Funciones y operaciones

LESS tambien tiene operaciones que permiten sumar, restar, dividir y multiplicar los valores de las propiedades.

Ejemplo:

@borde: 1px;
@color: #11111;
section {
color: (@color * 3);
border-left: @borde;
border-right: (@borde * 2);
}
article {
color: (@color + #555555);
border-top: (@borde * 2);
border-bottom: (@borde * 3);
}

Funciones de color

LESS tiene funciones para transformar colores, estos son transformados a HSL y manipulados a nivel de canal.

lighten(@color, 5%); // devuelve un color un 5% mas claro que @color
darken(@color, 5%); // devuelve un color un 5% mas oscuro que @color
saturate(@color, 5%); // devuelve un color un 5% más saturado que @color
desaturate(@color, 5%); // devuelve un color un 5% menos saturado que @color
fadein(@color, 5%); // devuelve un color un 5% menos transparente que @color
fadeout(@color, 5%); // devuelve un color un 5% más transparente que @color
spin(@color, 10); // devuelve un color con 10 grados de tono mayor que @color
spin(@color, -10); // devuelve un color con 10 grados de tono menor que @color
Tambien podemos extraer información de un color:
hue(@color); // devuelve el canal 'hue' de @color
saturation(@color); // devuelve el canal 'saturation' de @color
lightness(@color); // devuelve el canal 'lightness' de @color

Más información

Web oficial de LESS http://lesscss.org/

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies