ECSSv0.2

🇷🇺 Русский

🇬🇧 English

🇷🇺 Русский

🇬🇧 English

Тема

@element ​

Директива @element объявляет именованный вложенный элемент внутри @block.

Синтаксис ​

ecss
@block Button {
  @element Name {
    /* CSS-стили элемента */
  }
}

Несколько элементов можно объявить в одной директиве:

ecss
@block Button {
  @element Icon, Text {
    display: flex;
    align-items: center;
  }
}

Имя элемента ​

Имя обязательно начинается с заглавной буквы (PascalCase): Icon, Text, Label.

Одно имя может встречаться в блоке несколько раз — это один и тот же элемент, стили из всех вхождений дополняются.

Использование ​

ecss
@block Button {
  @param --with-icon boolean;

  @element Text {
    font-weight: 600;
  }

  @element Icon {
    display: flex;
    align-items: center;
    width: 20px;
    height: 20px;
  }

  @if (--with-icon) {
    gap: 8px;
  }
}

Параметры блока внутри @element ​

Внутри @element доступны параметры родительского блока — как значения свойств, так и в условиях @if:

ecss
@block Button {
  @param --active boolean;
  @param --accent? color: #646cff;

  @element Icon {
    width: 20px;
    color: --accent; // var() не нужен

    @if (--active) {
      opacity: 1;
    }
  }
}

@element внутри @if ​

Стили элемента могут зависеть от параметра блока:

ecss
@block Button {
  @param --with-icon boolean;

  @element Icon {
    display: flex;
  }

  @if (--with-icon) {
    @element Icon {
      color: #646cff;
    }
  }
}

@element во вложенных правилах ​

Элементы можно объявлять внутри CSS-вложенности. & внутри @element ссылается на сам элемент:

ecss
@block Button {
  @element Text {
    color: inherit;

    &:hover {
      color: #646cff;
    }
  }

  &:disabled {
    @element Text {
      color: gray;
    }
  }
}

Повторное объявление ​

Одно имя может встречаться несколько раз — это один и тот же элемент, все вхождения стилей применяются к нему:

ecss
@block Button {
  @element Text {
    color: red;
  }

  &:hover {
    @element Text {
      color: blue;
    }
  }
}

Наследование ​

Элементы родительского блока доступны в потомке и могут быть расширены дополнительными стилями:

ecss
// Base.ecss
@block Base {
  @element Label {
    font-size: 14px;
  }
}
ecss
// Button.ecss
@import { Base } from "./Base.ecss";

@block Button extends Base {
  @element Label {
    font-weight: 600;
  }
}

Пример ​

ecss
@block Card {
  @param --highlighted boolean;

  @element Icon {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
  }

  @element Text {
    font-size: 14px;
    line-height: 1.5;
  }

  @if (--highlighted) {
    @element Text {
      font-weight: 600;
      color: #646cff;
    }
  }
}
tsx
import { ECard } from './Card.ecss';

<ECard params={{ highlighted: true }}>
  <ECard.Icon>...</ECard.Icon>
  <ECard.Text>Нажми</ECard.Text>
</ECard>;

См. также ​

  • @block — родительский блок
  • @if — условные стили для элементов
  • Адаптер React — суб-компоненты в React