Наследование (extends)

Ключевое слово extends позволяет одному блоку или перечислению расширять другой. Родитель должен быть объявлен в том же файле или импортирован через @import.

Наследование блоков

@block Child extends Parent получает все стили и параметры родителя и добавляет свои:

@block Pressable {
  @param --disabled? boolean;

  cursor: pointer;

  @if (--disabled) {
    cursor: not-allowed;
    opacity: 0.4;
  }
}

@block Button extends Pressable {
  @param --variant Variant;

  padding: 8px 16px;
  border-radius: 6px;
}

EButton принимает и variant, и унаследованный disabled. Наследование можно выстраивать цепочкой: A extends B extends C.

Конфликт имён. Переобъявить унаследованный @param с тем же именем в дочернем блоке нельзя — это ошибка компиляции.

Наследование перечислений

@enum Child extends Parent объединяет значения: потомок добавляет свои к набору родителя.

@enum BaseSize {
  values: "sm", "md", "lg";
}

@enum ButtonSize extends BaseSize {
  values: "xl"; // итог: sm, md, lg, xl
}

Значения, уже присутствующие у родителя, при повторном указании игнорируются без ошибки.

extends или @external?

Это два разных механизма:

• extends — наследование. Дочерний блок вбирает стили родителя в себя; родитель становится частью потомка.
• @external — контекстная стилизация. Блок не наследуется, а лишь дополняется стилями там, где он вложен в текущий блок.

Берите extends, когда строите новый компонент на основе существующего; @external — когда нужно подправить вид чужого компонента внутри своего.

См. также

• @block — синтаксис extends
• @enum — наследование перечислений
• @external — альтернатива наследованию
• Модульная система — наследование из других файлов