У Sass есть функция, называемая extend которая упрощает заимствование правил CSS из одного элемента и построение на них в другом. Например, .panel блок правил CSS .panel класс .panel . Он имеет background-color , height и border .
.panel {Теперь вам нужна другая панель под названием
background-color: red;
высота: 70px;
граница: 2px сплошной зеленый;
}
.big-panel . Он имеет те же базовые свойства, что и .panel , но также требует width и font-size . Можно скопировать и вставить исходные правила CSS из .panel , но код становится повторяющимся, когда вы добавляете больше типов панелей. Директива extend - это простой способ повторного использования правил, написанных для одного элемента, а затем добавить другое для другого: .big панели {
@extend .panel;
ширина: 150 пикселей;
font-size: 2em;
}
.big-panel будет иметь те же свойства, что и .panel в дополнение к новым стилям.Создайте класс .info-important который расширяет .info а также имеет background-color установленный на пурпурный.