El preprocesador LESS

¿Qué es LESS ?

Es una preprocesador de CSS por excelencia que nos permite solventar las carencias que tiene CSS mediante muchas características.

Así mismo y extender sus capacidades con simular las funciones de un lenguaje de programación en particular.

Y unos de los framework mas usados, populares y con una gran comunidad que utilizan es BootStrap para desarrollar Páginas web Responsives.

Las características que posee este preprocesador.

  • Anidamiento
  • Extensión de reglas
  • Variables
  • Mixins
  • Import
  • Loops
  • Directivas

Formas de uso de LESS

  • Automatizado (algunos editores / grunt)
  • Aplicación de monitorización
  • Lado de servidor a demanda
  • En linea de comandos (nodeJS / grunt)
  • Compiladores online
  • Lado cliente (JavaScript)

Fundamentos Básicos del Lenguaje LESS

Para creación de variables.

@nombreVariable: valor;

Sintaxis anidamiento.

header {
	padding: 10px;
	background-color: #333;
	
	> h1 {
		background-color: @bg-base;
	}
       p {
		color: #FFF;
		font: @font-base;
	}
}

Escribir comentarios.

// Esto es un comentario en LESS
/* Este comentario si se muestra en el CSS convencional */

Referencias al antecesor de Pseudoelemento (hover).

a {
	color: red;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

Resultado:

a {
  color: red;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Definir prefijos de una clase con lo demás variantes.

.boton {
	&-ok {
		color: green;
	}
	&-error {
		color: red;
	}
}

Resultado:

.boton-ok {
  color: green;
}
.boton-error {
  color: red;
}

Clases anidadas con hijo directo.

.padre {
	.hijo {
		& > h1 {
			color: black;
		}
	}
}

Resultado:

.padre .hijo > h1 {
  color: black;
}

Clase anidada como padre con el simbolo &

.abuelo {
	.padre {
		.maternos & {
			color: red;
		}
	}
}

Resultado:

.maternos .abuelo .padre {
  color: red;
}

Combinación de varios selectores como el símbolo &.

div, p, span {
	& + & {
		color: green;
	}
}

Resultado:

/* Todas las combinaciones posibles de etiquetas */
div + div,
div + p,
div + span,
p + div,
p + p,
p + span,
span + div,
span + p,
span + span {
  color: green;
}

Variables en LESS

Deja una respuesta