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

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

`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; } } }`
← →
↑