Директивы

ECSS добавляет к обычному CSS набор директив (at-правил). Ниже — краткая сводка и то, где каждая директива допустима; подробности — на странице соответствующей директивы.

Директива	Назначение	Где допустима
@import	импорт объявлений из другого .ecss-файла	верхний уровень
@enum	перечисление допустимых строковых значений	верхний уровень
@const	именованная константа	верхний уровень и внутри @block
@block	блок стилей (становится компонентом)	верхний уровень
@param	параметр блока	в начале тела @block
@element	вложенный элемент блока	внутри @block
@if / @elseif / @else	условные стили по значениям параметров	внутри @block
@external	стили чужого блока в контексте текущего	внутри @block
@debug	отладочный вывод	внутри @block

Объявления верхнего уровня

С них начинается файл: @import, @enum, @const, @block. Имена блоков и перечислений пишутся в PascalCase (Button, Theme), имена параметров и констант — это CSS-переменные с префиксом -- (--variant, --gap).

Внутри блока

Тело @block начинается с объявлений @param, дальше идут CSS-правила и директивы @element, @if/@elseif/@else, @external, @const, @debug. Многие из них можно вкладывать друг в друга и в обычные CSS-правила:

@block Card {
  @param --active boolean;

  &:hover {
    @if (--active) {
      box-shadow: 0 0 0 2px currentColor;
    }
  }
}

Комментарии

Поддерживаются строчные // и блочные /* … */ комментарии. Комментарий в стиле JSDoc (/** … */) перед @block, @enum или @param становится подсказкой при наведении в редакторе:

/** Базовая кнопка. */
@block Button {
  /** Цветовая схема. */
  @param --variant Variant;
}