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

При работе со стилями могут возникать проблемы при наследовании. Однако с помощью директивы `@extend` легко их избежать, поскольку она четко указывает какой селектор должен наследовать стили другого. Рассмотрим пример:

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

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

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

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

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

`#product-card { color: #302f2f; font-family: 'Times New Roman', Times, serif; } #product-card-title { @extend #product-card; font-weight: 600px; }`

Измените условия предыдущей задачи, чтобы `#product-card` наследовала у `#product` ширину, равную `500px`.

← →
↑