@external

Директива @external позволяет дополнить стили другого блока в контексте текущего. Объявляется внутри @block.

В отличие от extends (наследование — блок-потомок вбирает стили родителя в себя), @external ничего не наследует: он меняет вид внешнего блока только там, где тот вложен в текущий. Например, кнопка внутри Toolbar получит особый стиль, не затрагивая кнопки в других местах.

Синтаксис

@import { SomeBlock } from "./SomeBlock.ecss";

@block Parent {
  @external SomeBlock {
    /* дополнительные стили для SomeBlock внутри Parent */
  }

  @external SomeBlock.Element {
    /* стили для элемента SomeBlock внутри Parent */
  }
}

Блок, на который ссылается @external, должен быть импортирован через @import.

Параметры

Внутри @external доступны параметры текущего блока. Параметры внешнего блока недоступны:

@block Panel {
  @param --compact boolean;

  @external NavLink {
    @if (--compact) {
      padding: 4px 8px;
    }
  }
}

Элементы внешнего блока

К элементам внешнего блока обращаются через точку:

@external NavLink.Icon {
  width: 16px;
  height: 16px;
}

@external NavLink.Label {
  font-size: 13px;
}

Ссылка на текущий блок

@external может ссылаться и на блок, в котором объявлен. Получается потомковый селектор .Block .Block — стили применятся к блоку, вложенному в другой экземпляр самого себя (например, карточка внутри карточки):

@block Card {
  padding: 16px;

  @external Card {
    margin-top: 8px; /* .Card .Card */
  }
}

TIP

Для оформления соседних экземпляров того же блока проще обычная CSS-вложенность с &: & + & { margin-left: 8px; } даёт .Button + .Button — отступ между подряд идущими кнопками.

Пример

// Notification.ecss
@import { Button } from "./Button.ecss";

@enum Tone {
  values: "info", "success", "error";
}

@block Notification {
  @param --tone Tone;

  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;

  @if (--tone == "success") {
    background: #f0fff4;
    color: #276749;
  }

  @if (--tone == "error") {
    background: #fff5f5;
    color: #9b2c2c;
  }

  @external Button {
    font-size: 13px;

    @if (--tone == "success") {
      color: #276749;
    }

    @if (--tone == "error") {
      color: #9b2c2c;
    }
  }

  @external Button.Text {
    font-weight: 500;
  }
}

См. также

• @import — импорт блока для использования в @external
• @block — блок, внутри которого объявляется @external
• @element — элементы блока