ECSSv0.2

🇷🇺 Русский

🇬🇧 English

🇷🇺 Русский

🇬🇧 English

Тема

@if / @elseif / @else ​

Директивы @if, @elseif и @else применяют CSS-правила в зависимости от значений параметров блока. Используются только внутри тела @block.

Синтаксис ​

ecss
@if (condition) {
  /* ... */
}

@elseif (condition) {
  /* ... */
}

@else {
  /* ... */
}

@elseif и @else необязательны. @elseif может встречаться любое количество раз, @else — только один раз и всегда последним в цепочке.

Условия ​

Boolean-параметр ​

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

Сокращённая форма — эквивалент --disabled == true. Отрицание через !:

ecss
@if (!--disabled) {
  cursor: pointer;
}

Сравнение значений ​

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

@if (--status != "error") {
  border-color: transparent;
}

Сравнение с @const ​

В условии можно использовать @const — например, сравнить параметр с константой:

ecss
@const --brand color: #646cff;

@block Button {
  @param --color? color;

  @if (--color == --brand) {
    font-weight: 600;
  }
}

Опциональный параметр и null ​

Опциональный параметр без значения равен null. Это можно проверить явно или через сокращённую форму:

ecss
@enum Variant {
  values: "primary", "secondary";
}

@block Tag {
  @param --variant? Variant;

  @if (--variant == null) {
    background: #f0f0f0; // значение не передано
  }

  @if (!--variant) {
    border: 1px solid #ccc; // эквивалент == null
  }
}

Логические операторы ​

ecss
@if (--expanded && --theme == "dark") {
  background: #121212;
}

@if (--expanded || --pinned) {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

Группировка ​

ecss
@if ((--variant == "primary" || --variant == "danger") && --disabled) {
  opacity: 0.3;
}

Цепочка @elseif / @else ​

@elseif добавляет альтернативное условие — его тело применяется, если предыдущие условия не выполнились. @else задаёт ветку по умолчанию, которая применяется когда ни одно из условий не совпало:

ecss
@if (--status == "idle") {
  background: #f0f0f0;
  color: #555;
}

@elseif (--status == "loading") {
  background: #e0f0ff;
  color: #0055cc;
}

@elseif (--status == "error") {
  background: #ffe0e0;
  color: #cc0000;
}

@else {
  background: #e0ffe0;
  color: #006600;
}

@else можно использовать и без @elseif:

ecss
@if (--active) {
  color: #646cff;
}

@else {
  color: #999;
}

Вложенные условия ​

@if-блоки можно вкладывать на любую глубину:

ecss
@block Panel {
  @param --expanded boolean;
  @param --theme string;
  @param --pinned boolean;

  @if (--expanded) {
    max-height: 1000px;

    @if (--theme == "dark") {
      background: #121212;

      @if (--pinned) {
        border: 2px solid #0077ff;
      }
    }
  }
}

@if с @element ​

Внутри @if можно использовать @element для условных стилей вложенных элементов:

ecss
@block Button {
  @param --active boolean;

  @element Icon {
    color: gray;
  }

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

Пример ​

ecss
@enum Status {
  values: "idle", "loading", "error", "success";
}

@block Badge {
  @param --status Status;
  @param --outlined? boolean: false;

  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;

  @if (--outlined) {
    border: 1px solid currentColor;
    background: transparent;
  }

  @if (--status == "idle") {
    color: #555;
    background: #f0f0f0;
  }

  @elseif (--status == "loading") {
    color: #0055cc;
    background: #e0f0ff;
  }

  @elseif (--status == "error") {
    color: #cc0000;
    background: #ffe0e0;
  }

  @else {
    color: #006600;
    background: #e0ffe0;
  }
}

См. также ​

  • @param — параметры, используемые в условиях
  • @const — константы, используемые в условиях
  • @element — условные стили вложенных элементов
  • @block — блок, внутри которого используются условия