# Цепные расширения в @extend в SASS

Директива `@extend` поддерживает также цепное (последовательное) расширение, т. е. селектор может расширяться другим селектором, который, в свою очередь, расширяется третьим селектором. Например:

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

`.warning { border: 1px solid; background-color: #ffd900; } .personalWarning { @extend .warning; border-width: 3px; } .systemWarning { @extend .personalWarning; position: center; }`

Как мы видим из результата компиляции все элементы с классом `.systemWarning` имеют также стили классов `.warning` и `.personalWarning`:

`.warning, .personalWarning, .systemWarning { border: 1px solid; background-color: #ffd900; } .personalWarning, .systemWarning { border-width: 3px; } .systemWarning { position: center; }`

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

`div { font-size: 10px; color: #181402; } .main-block { @extend div; border: 2px solid orange; } #warning-text { @extend .main-block; margin-top: 10px; }`

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

`p { padding: 10px; } .main-text { font-weight: 800px; } .card { @extend p; color: #021338; } .product-card { @extend .card, .main-text; font-size: 12px; }`

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

`p { padding: 5px; } .main-text { @extend p; font-size: 14px; } .card { @extend .main-text; border: 1px solid black; } .product-card { @extend .card; background-color: #e1f1f1; }`
← →
↑