Вложенные конструкции в 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; } } }