# Последовательность селекторов в @extend в SASS

Директиву `@extend` можно использовать и для расширения последовательности селекторов. Смотрите следующий пример:

Рассмотрим пример:

`#menu .navbar { @extend div; } div { color: #0a0a4b; &:hover { text-decoration: underline; } }`

После компиляции у нас получился следующий код:

`div, #menu .navbar { color: #0a0a4b; } div:hover, #menu .navbar:hover { text-decoration: underline; }`

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

`button { @extend link; } link { font-size: 10px; &:active { color: #f0ffff; background-color: #110c63; } }`

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

`.main-text { font-family: Impact; } button { @extend link; font-size: 10px; @extend .main-text; } link { &:hover { color: #333333; background-color: #6d6d6d; } }`
← →
↑