LESS - это так называемый препроцессор CSS, который позволяет программировать на CSS. Да-да, вы не ослышались - программировать: можно вводить переменные, делать циклы и многие другие полезные вещи, которые упрощают работу с CSS.

Видео про работу с LESS

Итак, давайте посмотрим, как работать с LESS и что для этого нужно. Об этом я рассказываю в следующем видео:

Полезные ссылки

Ссылка на официальную документацию LESS, ссылка на компилятор Koala.

Примеры использования LESS

Ниже я привожу примеры использования LESS, о которых рассказываю в видео, чтобы вам не приходилось каждый раз пересматривать видео в поисках нужной вам вещи (пока без описаний, попозже может быть добавлю). Итак, вот они:

Пример . Работа с переменными

@var: 10px;
p{
	font-size: @var;
}

Результат выполнения кода:

p {
	font-size: 10px;
}

Пример . Операции, комментарии

@sel: class;
.@{sel}{
	font-size: 15px;
}

Результат выполнения кода:

.class {
	font-size: 15px;
}

Пример . Примешивания

.mix{
	width: 100px;
	height: 100px;
}
p{
	.mix;
	color: red;
}

Результат выполнения кода:

.mix {
	width: 100px;
	height: 100px;
}
p {
	width: 100px;
	height: 100px;
	color: red;
}

Пример . Функции

.radius (@radius){
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}
p{
	.radius(10px);
}

Результат выполнения кода:

p {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.shadow (@x, @y, @r, @w, @c){
	-webkit-box-shadow: @arguments;
	-moz-box-shadow: @arguments;
	box-shadow: @arguments;
}
p{
	.shadow(1px, 1px , 3px, 5px, red);
}

Результат выполнения кода:

p {
	-webkit-box-shadow: 1px 1px 3px 5px red;
	-moz-box-shadow: 1px 1px 3px 5px red;
	box-shadow: 1px 1px 3px 5px red;
}

.shadow (@s){
	-webkit-box-shadow: @s;
	-moz-box-shadow: @s;
	box-shadow: @s;
}
p{
	.shadow(1px 1px 3px 5px red, 2px 3px blue;);
}

Результат выполнения кода:

p {
	-webkit-box-shadow: 1px 1px 3px 5px red, 2px 3px blue;
	-moz-box-shadow: 1px 1px 3px 5px red, 2px 3px blue;
	box-shadow: 1px 1px 3px 5px red, 2px 3px blue;
}

.mixin(){
	@width: 100%;
	@height: 200px;
}
.caller{
	.mixin();
	width: @width;
	height: @height;
}

Результат выполнения кода:

.caller {
	width: 100%;
	height: 200px;
}

Пример . Вложенные теги

#header{
	.menu{
		color: red;
	}
	.logo{
		width: 100px;
	}
}

Результат выполнения кода:

#header .menu {
	color: red;
}
#header .logo {
	width: 100px;
}

Пример . Вложенность без пробела

a{
	color: blue;
	&:hover{
		color: red;
	}
}

Результат выполнения кода:

a {
	color: blue;
}
a:hover {
	color: red;
}

Пример . Операция +:

.shadow (@s){
	-webkit-box-shadow +: @s;
	-moz-box-shadow +: @s;
	box-shadow +: @s;
}
p{
  	.shadow(1px 1px  3px 5px red);
  	.shadow(2px 3px blue);
}

Результат выполнения кода:

p {
	-webkit-box-shadow: 1px 1px 3px 5px red, 2px 3px blue;
	-moz-box-shadow: 1px 1px 3px 5px red, 2px 3px blue;
	box-shadow: 1px 1px 3px 5px red, 2px 3px blue;
}

Пример . Операция +_:

.rotate(@r){
	transform +_: rotate(@r);
}
.skew(@s){
	transform +_: skew(@s);
}
p{
	.rotate(10deg);
	.skew(10deg);
}

Результат выполнения кода:

p {
	transform: rotate(10deg) skew(10deg);
}

Пример . Вставка блоков кода

@test: {&:hover{width: 100px;}};
.test{
	@test();
}

Результат выполнения кода:

.test:hover {
	width: 100px;
}

.placeholder(@code){
	&:-ms-placeholder{@code();}
 	&::-moz-placeholder{@code();}
	&::-webkit-input-placeholder{@code();}
	&::placeholder{@code();} 
}
input{
	.placeholder({
		color: white;
		background-color: red;
	});
}

Результат выполнения кода:

input:-ms-placeholder {
	color: white;
	background-color: red;
}
input::-moz-placeholder {
	color: white;
	background-color: red;
}
input::-webkit-input-placeholder {
	color: white;
	background-color: red;
}
input::placeholder {
	color: white;
	background-color: red;
}

.keyframes(@name, @code){
	@-o-keyframes @name {@code();}
	@-moz-keyframes @name {@code();}
	@-webkit-keyframes @name {@code();}
	@keyframes @name {@code();} 
}
.keyframes(anim,{
		from{
			width: 100px;
		}
		to{
			width: 200px;
		}
	}
);

Результат выполнения кода:

@-o-keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}
@-moz-keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}
@-webkit-keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}
@keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}

Пример . Функция calc

.calc(@name, @calc){
	@{name}: -webkit-calc(@calc);
	@{name}: -moz-calc(@calc);
	@{name}: calc(@calc);
}
p{
	.calc(width, ~'10px + 30%');
}

Результат выполнения кода:

p {
	width: -webkit-calc(10px + 30%);
	width: -moz-calc(10px + 30%);
	width: calc(10px + 30%);
}

Пример . Медиа запросы

@media: mobile;
.mixin (@w) when (@media = mobile) {width: @w;}
.mixin (@w) when (@media = desktop) {width: @w;}
 p{
	.mixin(100px);
}

Результат выполнения кода:

p {
	width: 100px;
}

.mixin (@w) when (@w < 100px) { width: @w; height: 100px;}
.mixin (@w) when (@w > 100px) { width: @w; height: 200px;}
 p{
	.mixin(50px);
}

Результат выполнения кода:

p {
	width: 50px;
	height: 100px;
}

Пример . Условия

@my-option: true;
&when (@my-option = true){
	button{
		color: blue;
		width: 100px;
	}
	a{
		color: red;
	}
}

Результат выполнения кода:

button {
	color: blue;
	width: 100px;
}
a {
	color: red;
}

Пример . Циклы

.loop(@counter) when (@counter > 0){
	.loop((@counter - 1));    // next iteration
	width: (10px * @counter); // code for each iteration
}
div{
	.loop(5); // launch the loop
}

Результат выполнения кода:

div {
	width: 10px;
	width: 20px;
	width: 30px;
	width: 40px;
	width: 50px;
}

.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n){
	.column-@{i}{
		width: (@i * 100% / @n);
	}
	.generate-columns(@n, (@i + 1));
}

Результат выполнения кода:

.column-1 {
	width: 25%;
}
.column-2 {
	width: 50%;
}
.column-3 {
	width: 75%;
}
.column-4 {
	width: 100%;
}

Пример . Расширение

a{color: red}
b{width: 100px; &:extend(a);}

Результат выполнения кода:

a, b {
	color: red;
}
b {
	width: 100px;
}

Пример . Переменные переменных

@fnord:  "I am fnord.";
@var:    "fnord";
p{
	content: @@var;
}

Результат выполнения кода:

p {
  	content: "I am fnord.";
}