sass
Расширение / Наследование

Синтаксис

• @extend .<className>
• @extend .<className>, .<className>
• @extend .<className> !optional
• @extend .<className>, .<className> !optional

параметры

замечания

Расширить класс

.message
  color: white

.message-important
  @extend .message
  background-color: red

Это займет все стили из .message и добавит их в .message-important . Он генерирует следующий CSS:

.message, .message-important {
  color: white;
}

.message-important {
  background-color: red;
}

Расширение от нескольких классов

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

В приведенном выше коде @extend используется в одной строке для добавления кода нескольких классов в .message-important , однако можно использовать один расширение для каждой строки следующим образом:

.message-important
    @extend .message
    @extend .important

Любой из этих методов будет генерировать следующий CSS:

.message, .message-important {
  color: white;
}

.important, .message-important {
  background-color: red;
}

Расширение цепочек

.message
  color: white
  background: black

.message-important
  @extend .message
  font-weight: bold

.message-error
  @extend .message-important
  font-style: italic

Этот код вызывает .message-error для расширения от .message-important , что означает, что он будет содержать код из обоих .message-important и .message , так как .method-important распространяется от .message . Это приводит к следующему CSS:

.message, .message-important, .message-error {
  color: white;
  background: black;
}

.message-important, .message-error {
  font-weight: bold;
}

.message-error {
  font-style: italic;
}

Отказ от ответственности. Убедитесь, что класс (ы), из которого вы распространяетесь, происходит только один раз в коде, в противном случае Sass может генерировать некоторый беспорядочный, запутанный CSS.

Дополнительные расширения

Иногда вам может @extend чтобы @extend был необязательным и не требовал, чтобы указанный класс существовал в вашем коде.

.message-important
  @extend .message !optional
  background: red

Это приведет к следующему CSS:

.message-important {
  background: red;
}

Отказ от ответственности. Это полезно при разработке, когда у вас может не быть всего написанного кода, и вы не хотите ошибок, но его, вероятно, следует удалить в процессе производства, поскольку это может привести к неожиданным результатам.

Заполнители

Иногда вы создадите классы, которые не будут использоваться сами по себе, а будут распространяться только внутри других наборов правил. Это означает, что скомпилированный файл CSS будет больше, чем нужно. Селекторы-заполнители решают эту проблему.

Селекторы-заполнители похожи на селекторы классов, но они используют процентный символ (%) вместо (.), Используемый для классов. Они не будут отображаться в скомпилированном CSS.

%button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
} 

.error-button {
    @extend %button;
    background-color: #FF0000;
}

.success-button {
    @extend %button;
    background-color: #00FF00;
}

Это будет скомпилировано для следующего CSS:

.error-button, .success-button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
}

.error-button {
    background-color: #FF0000;
}

.success-button {
    background-color: #00FF00;
}

Расширение родительского

Обычно пытается расширить родительский стиль так:

.parent {
  style: value;

  @extend &;
}

Возникнет ошибка, указав, что родительский элемент не может быть расширен. Это имеет смысл, но есть обходной путь. Просто сохраните родительский селектор в переменной.

.parent {
  $parent: &;
  style: value;
  @extend #{&};
}

В приведенном выше примере нет никакой пользы, но это дает вам возможность обернуть родительские стили из включенного mixin.