Less

less.less

Less pro by edinson carranza

@varUno: blue;
@varDos: green;
* {
	box-sizing: border-box;
}

//Añadimiento normal en less
/*
.header h1 {
	background: red;
}
> descendiente directo
*/

.header {
	padding: 1em 0.5em;
	background: red;
	> h1 {
	color: black;
	}
	h2 {
	background: @varUno;
	}
}

/*referncias al selector padre*/

.header {
	&:hover {
	background: @varDos;
	}
}

.button {
	&-hola {
	background: orange;
	}
	
}

header, h1, h2, button {
	& + & {
	background: black;
	}
}
@divLove: love;
.@{divLove}{
	background: red;
	height: 500px;
	width: 50px;
}

/*Funcciones en les*/

.width {
	width: 1220px / 2 - 10 * 9;
	height: 50 - 30px;
	background: peru;
	color: black;
}
.love:extend(.width) {
	background: black;
}
@edi: 'edinson';

/*condiciones*/
& when (@edi = 'edinson') {
		.despedida {
		font-size: 5em;
		background: red;
		}
}


/*Bucles*/
.edin(@i) when (@i > 0){
	.edin((@i - 1));
	width: (1220px/@i);
}
div {
	.edin(5);
}