Вложенные конструкции в LESS

В LESS можно вкладывать блоки кода друг в друга, вот таким образом:

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

В результате после компиляции вложенность блоков преобразуется во вложенность соответствующих селекторов:

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

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

div {
	p {
		color: red;
	}
	ul {
		color: blue;
	}
}

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

div {
	color: red;
	p {
		color: blue;
	}
}

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

div {
	color: red;
	
	ul {
		color: blue;
		
		li {
			font-size: 20px;
		}
	}
}

Группировка селекторов

Если при вложенности имеет место группировка селекторов, то LESS правильным образом развернет эту конструкцию при компиляции. Посмотрим на практике. Вот пример группировки:

#header {
	.menu, .logo {
		color: red;
	}
}

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

#header .menu, #header .logo {
	color: red;
}

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

#block {
	ul, ol {
		color: blue;
		
		li {
			font-size: 20px;
		}
	}
}