# Принципы работы наследования в SASS

Суть работы директивы `@extend` состоит в том, что она добавляет расширяющийся селектор в любой набор стилей, где встречается расширяемый селектор (в нашем примере `.warning`):

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

`.warning { border: 1px solid; background-color: #ffd900; } .warning .instruction { background-image: url("/image/warning.png"); } .personalWarning { @extend .warning; border-width: 3px; }`

Теперь посмотрим на результат компиляции:

`.warning, .personalWarning { border: 1px solid; background-color: #ffd900; } .warning .instruction, .personalWarning .instruction { background-image: url("/image/warning.png"); } .personalWarning { border-width: 3px; }`

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

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

`#product-card p{ color: #460707; padding: 10px; } #product-card-title { @extend #product-card; font-weight: 600px; }`

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

`.link .main-block{ font-size: 14px; text-decoration: dashed; } .active-link { @extend .link; color: red; }`

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

`.link .main-block{ font-weight: bold; text-decoration: none; } .active { color: red; } .active-link { @extend .link; @extend .active; }`
←→
↑