gradiente

Русский

English

Русский

English

Appearance

🧠 Как читать Gradient Pattern DSL ​

Gradient Pattern DSL может выглядеть сложным, но он построен на небольшом наборе понятных и повторяемых правил.
В этом разделе показано, как читать любой паттерн шаг за шагом.

📌 Начать с границ ​

Любой паттерн всегда имеет вид:

bash
^ ... .

Читается так:

bash
Начало паттерна
...
Конец паттерна

🧠 Пример: базовый повторяющийся паттерн ​

Паттерн ​

ts
^[color-stop,~color-stop].

📌 Шаг 1 - границы ​

bash
^ - начало паттерна  
. - конец паттерна

Значит:

всё между ^ и . - это правило, которое нужно прочитать

📌 Шаг 2 - смотрим внутрь ​

bash
[color-stop,~color-stop]

Это последовательность ([]), то есть:

bash
сначала одно, затем другое

📌 Шаг 3 - первый элемент ​

bash
color-stop

Значит:

паттерн должен начинаться с color-stop

📌 Шаг 4 - второй элемент ​

bash
~color-stop

Оператор ~ означает:

bash
повторение 0 или более раз

Значит:

любое количество дополнительных color-stop

📌 Шаг 5 - объединяем ​

bash
[color-stop,~color-stop]

Читается как:

bash
один color-stop
затем любое количество дополнительных color-stop

📌 Финальное объяснение ​

bash
Начало паттерна

Ожидается:
  один color-stop

Затем:
  любое количество дополнительных color-stop

Конец паттерна

💡 Интуиция ​

Этот паттерн можно читать так:

минимум один color-stop, затем сколько угодно

🔗 Попробовать ​

Проверить можно в playground:

bash
color-stop
color-stop, color-stop
color-stop, color-stop, color-stop

Все варианты валидны.

📌 Последовательность [] ​

bash
[a,b]

Означает: a затем b

Значит:

bash
[color-stop,~color-stop]

это:

bash
color-stop, затем повторение color-stop

📌 Повторение ~ ​

bash
~color-stop

Означает:

bash
0 или более color-stop

Итог:

bash
минимум один color-stop
затем любое количество дополнительных

📌 Итоговая форма ​

ts
^[color-stop,~color-stop].
bash
^ - начало паттерна

Ожидается:
  минимум один color-stop

Затем:
  любое количество дополнительных

. - конец паттерна

📌 Условия OR ​

bash
(config|color-stop)

Означает:

bash
либо config
либо color-stop

📌 Комбинация sequence и OR ​

bash
([config,color-stop]|color-stop)

Читается так:

bash
либо:
  config, затем color-stop
либо:
  color-stop

📌 Вложенные паттерны ​

ts
^[([config,color-stop]|color-stop),~color-stop].

Читаем по шагам:

bash
Начало паттерна

Далее:
  либо:
    config, затем color-stop
  либо:
    color-stop

Затем:
  повторение color-stop

Конец паттерна

📌 Color hints ​

bash
[color-hint,color-stop]

Означает:

bash
color-hint всегда должен сопровождаться color-stop

🧠 Ментальная модель ​

DSL - это набор инструкций:

bash
читаем вход слева направо
сопоставляем токены
разветвляемся при необходимости
повторяем, если разрешено

🔗 Попробовать интерактивно ​

Читать паттерны намного проще, когда видно их визуально:

👉 Открыть DSL Playground →

🚀 Итог ​

  • ^ → начало
  • . → конец
  • [] → последовательность
  • () → группа
  • | → или
  • ~ → повторение (0..n)
  • config → конфигурация (угол, направление и т.д.)
  • color-stop → цветовая точка
  • color-hint → точка интерполяции

Если это понятно - можно читать любой паттерн.

💡 Совет ​

Начать с простого:

bash
^color-stop.

И постепенно добавлять:

ts
[]
()
|
~