Цепные расширения

Цепное(последовательное) расширение возможно для селектора, который расширяется другим селектором, который, в свою очередь, расширяется третьим селектором. Например:

scss
.error {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

.error
  border: 1px #f00
  background-color: #fdd

.seriousError
  @extend .error
  border-width: 3px

.criticalError
  @extend .seriousError
  position: fixed
  top: 10%
  bottom: 10%
  left: 10%
  right: 10%
css
.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; 
}

.seriousError, .criticalError {
  border-width: 3px; 
}

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; 
}

В результате все элементы с классом .seriousError будут иметь класс .error и все элементы с классом .criticalError будут иметь классы .seriousError и .error.

Предыдущая страница

Множественные расширения

Следующая страница

Последовательность селекторов

Ваша 
Поддержка