LESS basics. Code examples

Variables:

@primary: red;
@main: blue;
@width: 100px;

Use thr variable:

div {
	margin: 40px;
	width: @width;
}

The path to our files can be stored in variables:

@img: "../img/";

Let’s use it:

.div {
	background: url("@{img}bg.jpg") center no-repeat;
}

Import:

@import "variables"

Nested elements:

div {
	margin: 40px;
	width: @width;
	&--classname {
		background:red;
	}
	&--another-class-name {
		
	}
}

Multi-level nesting is allowed:

div {
	margin: 40px;
	width: @width;
	&:hover,
	&:focus {
		text-decoration:none;
	}

}

Example of function:

div {
	color: darken(red, 20)
}

When 2 buttons are next to each other, you can add an indent between them:

.btn {
   &+& {
   	margin-right: 1rem;
   }
}

You can apply directly from the class to:

.btn {
	.disabled & {
	color: silver;
	}
}

Mixins:

.btn(@bg) {
	background-color: @bg;

	&hover,
	&focus {
		background-color: @bg;
	}	
}

Use the mixins:

div {
	color: darken(red, 20);
	.btn(red);
}

Conditions:

& when(lightness(@bg) > 50) {
	color: @black;
}

Media queries can be written directly in the selector:

.div {
	width:500px;
	@media (min-width:501px) {
		background: red;
	}
}

~ – leaves quotes in variables