@import

Директива @import импортирует объявления из другого .ecss-файла. Объявляется на верхнем уровне файла.

Синтаксис

@import { Name1, Name2 } from "./path/to/file.ecss";

Из одного файла — один @import, несколько имён через запятую. Для разных файлов — отдельные строки:

@import { Variant, Size } from "./tokens.ecss";
@import { Shadow } from "./Shadow.ecss";

Что можно импортировать

• @enum — использовать как тип в @param
• @block — наследовать через extends (или дополнять через @external)
• @const — использовать в CSS-значениях и условиях @if

Переименование (as)

Импортируемое имя можно переименовать через as — удобно при конфликте имён в текущем файле:

@import { Variant as ButtonVariant } from "./tokens.ecss";
@import { --primary as --brand } from "./theme.ecss";

Дальше в файле объявление доступно под новым именем (ButtonVariant, --brand).

Импорт всего файла (*)

@import * from подключает все экспортируемые объявления файла без перечисления имён:

@import * from "./tokens.ecss";

Удобно для общих файлов с токенами и перечислениями, которые нужны целиком.

Импорт @enum

// tokens.ecss
@enum Variant {
  values: "primary", "danger", "ghost";
}

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

// Button.ecss
@import { Variant, Size } from "./tokens.ecss";

@block Button {
  @param --variant Variant;
  @param --size Size;

  @if (--variant == "primary") {
    background: #646cff;
  }

  @if (--size == "sm") {
    padding: 4px 8px;
  }

  @if (--size == "md") {
    padding: 8px 16px;
  }

  @if (--size == "lg") {
    padding: 14px 28px;
  }
}

Импорт @block

Импортированный @block можно использовать как родителя через extends. Вызвать его напрямую нельзя — только наследовать:

// Shadow.ecss
@enum ShadowLevel {
  values: "sm", "md", "lg";
}

@block Shadow {
  @param --shadow ShadowLevel;

  @if (--shadow == "sm") {
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  }

  @if (--shadow == "md") {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  }

  @if (--shadow == "lg") {
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
  }
}

// Button.ecss
@import { Shadow, ShadowLevel } from "./Shadow.ecss";

@block Button extends Shadow {
  @param --variant string;

  display: inline-flex;
  padding: 8px 16px;
  border-radius: 6px;
}

Импорт @const

// tokens.ecss
@const --primary color: #646cff;
@const --danger color: #e53e3e;

// Button.ecss
@import { --primary, --danger } from "./tokens.ecss";

@block Button {
  @param --variant Variant;

  @if (--variant == "primary") {
    background: --primary;
  }

  @if (--variant == "danger") {
    background: --danger;
  }
}

Пример

// design-tokens.ecss
@enum Variant {
  values: "primary", "danger", "ghost";
}

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

@const --primary color: #646cff;
@const --danger color: #e53e3e;

// Button.ecss
@import { Variant, Size, --primary, --danger } from "./design-tokens.ecss";

@block Button {
  @param --variant Variant;
  @param --size? Size: "md";
  @param --disabled boolean;

  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;

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

  @if (--variant == "primary") {
    background: --primary;
    color: #fff;
  }

  @if (--variant == "danger") {
    background: --danger;
    color: #fff;
  }

  @if (--variant == "ghost") {
    background: transparent;
    border: 1px solid currentColor;
  }

  @if (--size == "sm") {
    padding: 4px 8px;
    font-size: 12px;
  }

  @if (--size == "md") {
    padding: 8px 16px;
    font-size: 14px;
  }

  @if (--size == "lg") {
    padding: 14px 28px;
    font-size: 16px;
  }
}

См. также

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