Inicio Apuntes FPApuntes DAMCómo utilizar LESS (breve explicación)

Cómo utilizar LESS (breve explicación)

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Este post viene a cuento por que maquetando alguna que otra web me he dado cuenta de la cantidad de veces que he tenido que repetir código a la hora de escribir las hojas de estilo. Buscando un poco por internet encontré una pequeña explicación que me ha abierto los ojos con respecto a este «problema». En esta web se exponen algunos ejemplos que bien mirados puede ayudar mucho a la hora de utilizar este lenguaje. Que ahorre tiempo no implica que LESS haga un milagro, si no sabes CSS de poco te servirá, es importante tener conocimientos de  CSS antes de empezar con LESS.

En este post voy a reproducir los mismos conceptos básicos que se utilizan en la web que utilizo como referencia ya que no tengo mucho tiempo ahora mismo. Supongo que ya tienes instalado LESS, se puede utilizar tanto en windows como en linux, en esta web podrás consultar como hacerlo en Ubuntu a través de este artículo publicado anteriormente. Si lo necesitas en Windows en la página que utilizo como referencia tienen publicado un artículo referente a ello.

Cómo utilizar less

Variables de less

LESS incorpora la posibilidad de utilizar variables en nuestros hojas de estilo, cosa que es sumamente útil porque ¿Quién no se olvidó del hexadecimal de aquel color de una fuente, o de aquella fuente que tampoco recuerdas?. A mi me sucede a menudo, y cuando tienes escritas tres mil y pico líneas de código

// Definición de variables (Comentarios simples en CSS gracias a LESS)
@background-color: #f0f0f0;
@enlaces: blue;
@enlaces-hover-size: 18px;

//Variables selectores/propiedades
@b:body;
@bgcolor:background-color;

/*Uso de variables*/

@{b}{
	background:@background-color;
}

a{
	color:@enlaces;
}

p{
	//Uso de variable
	@{bgcolor}:green;

	//Operacion matemática
	height: 100+100px;
}

a:hover{
	font-size:@enlaces-hover-size;
}

Anidación

LESS nos permite anidar selectores para evitar tener que repetir lineas de código. Esto es algo que me ha venido muy bien y supongo que a muchos otros también les puede resultar muy útil.

/*Uso de la anidación*/

body{
	p{
		a{
			font-size:@enlaces-hover-size;
		}
	}
}

Mixins

Los mixins nos permiten meter bloques de código repetitivo en pequeñas funciones que podremos reutilizar. Esto a mi me ha venido bien para utilizar efectos CSS tan socorridos y que quedan tan bien en las páginas.

/*Mixins (son como funciones) */

//Mixin
.radius() {
   -webkit-border-radius:30px;
   -moz-border-radius:30px;
    border-radius:30px;
}

p{
	.radius();
}

//Pasar parametros
.radius(@px) {
   -webkit-border-radius:@px;
   -moz-border-radius:@px;
    border-radius:@px;
}

p{
	.radius(30px);
}

Mixin Guards

LESS también incorpora ciertas estructuras de control.

//Mixin Guards Condicional
.mixinB (@value) when (@value=true) {
  color: black;
}

h1{
	color:white;
	.mixinB(false);
}

Bucles

Además tenemos también bucles.

//Bucles

.loop(@cont) when (@cont > 0) {
  .loop((@cont - 1));    // proxima iteración
  height: ((500px/3) * @cont);
}

p {
  .loop(5);
}

En conclusión LESS es un lenguaje interesante para ahorrar tiempo a la hora de maquetar, aparte de lo que he comentado LESS incorpora un gran repertorio de funciones y características interesantes que podrás descubrir en su documentación oficial. No dejes de visitarla, ya que como he dicho esto no es más que un aperitivo de todo lo que se puede hacer …

Más información:

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.