Соединение селекторов в LESS

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

div {
	&.block {
		width: 300px;
	}
}

В результате после компиляции у нас получится следующий код:

div.block {
	width: 300px;
}

Расскажите, каким будет результат компиляции следующего кода:

#block {
	&.xxx {
		width: 300px;
	}
}

Расскажите, каким будет результат компиляции следующего кода:

#block {
	.xxx {
		width: 300px;
	}
}

Расскажите, каким будет результат компиляции следующего кода:

#block {
	&.xxx {
		&.zzz {
			width: 300px;
		}
	}
}

Расскажите, каким будет результат компиляции следующего кода:

#block {
	&.xxx {
		.zzz {
			width: 300px;
		}
	}
}

Расскажите, каким будет результат компиляции следующего кода:

#block {
	.xxx {
		&.zzz {
			width: 300px;
		}
	}
}

Псевдоклассы

Приведенный оператор удобно применять при работе с псевдоклассами. Смотрите пример:

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

Результат компиляции:

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

Расскажите, каким будет результат компиляции следующего кода:

a.class {
	&:link {
		color: red;
	}
	&:visited {
		color: blue;
	}
	&:hover {
		color: green;
	}
}

Упростите приведенный код:

#block {
	width: 300px;
}
#block a:link, #block a:visited {
	color: red;
}
#block a:hover {
	color: blue;
}

Части селектора

Можно соединять даже части одного класса. Например, вот так:

.button {
	&-ok {
		color: green;
	}
	&-cancel {
		color: red;
	}
}

В результате после компиляции у нас получится следующий код:

.button-ok {
	color: green;
}
.button-cancel {
	color: red;
}

Упростите приведенный код:

.label-success {
	color: green;
}
.label-warning {
	color: yellow;
}
.label-error {
	color: red;
}