Директива @extend
Бывают случаи, когда один селектор должен иметь все стили другого, а также свои собственные. Самый распространенный способ - использовать общий селектор, либо более специфический. Допустим, у нас есть дизайн обычной ошибки и серьезной ошибки. Мы используем такой вариант разметки:
Внимание! Ваш аккаунт был взломан.
а стили наши выглядят так:
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
К сожалению, это означает, что мы должны помнить о том, что класс .error нужно использовать с классом .seriousError. Такой расклад является не удобным, а бывает даже так, что это несет в себе семантические ошибки в разметке.
Директива @extend
позволяет избежать данных проблем, сообщая Sass, что один селектор должен
наследовать стили другого. Например:
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.error
border: 1px #f00
background-color: #fdd
.seriousError
@extend .error
border-width: 3px
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
Это означает, что все объявляемые стили для .error будут применяться и к .seriousError, в дополнение к характерным для .seriousError. В результате получается, что все элементы с классом .seriousError технически также будут иметь класс .error.
Другие правила, используемые .error, будут также применяться и для .seriousError. Например, у нас есть специальные стили для ошибок, вызванных атакой хакеров:
.error.intrusion {
background-image: url("/image/hacked.png");
}
Тогда элемент <div class="seriousError intrusion">
также будет иметь фон из hacked.png.
Поддержка