# Множественные расширения при применении @extend в SASS

Также интересной особенностью применения директивы `@extend` является то, что можно расширять одиночный селектор более чем одним селектором, т. е. он будет наследовать все стили:

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

`.warning { border: 1px solid; background-color: rgb(255, 217, 0); } .info { font-size: 14px; } .personalWarning { @extend .warning; @extend .info; border-width: 3px; }`

В результате компиляции мы получим:

`.warning, .personalWarning { border: 1px solid; background-color: #ffd900; } .info, .personalWarning { font-size: 14px; } .personalWarning { border-width: 3px; }`

Необходимо знать, что множественное расширение можно записать в виде списка селекторов, разделенных запятыми. Например, `@extend .warning, .info;` означает тоже самое, что и `@extend .warning; @extend .info;`

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

`link { font-size: 12px; background-color: #ffd900; } button:active { color: red; } .active-link { @extend link; @extend button:active; text-decoration: wavy; }`

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

`div { font-size: 10px; color: #181402; } .main-block { border: 2px solid orange; } p { padding: 5px; } #warning-text { @extend div, .main-block, p; margin-top: 10px; }`
← →
↑