, чтобы сохранить свой прогресс
Расширение одного набора стилей CSS для другого элемента
У 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
установленный на пурпурный.
/**
* Your test output will go here.
*/