Редактор CSS

Встроенный редактор CSS - это тип текстового редактора, который специально настраивается для помощи в написании CSS. Он доступен в качестве редактора в свойствах компонентов, предназначенных для получения CSS-кода в качестве их значения.

Редактор CSS доступен при нажатии крайней правой кнопки () Подробнее в свойствах пользовательского стиля в редакторе свойств. Он открывается в отдельной плавающей компоновке, позволяя регулировать ее размер или пристыковывать ее к макету UI Конструктора.

Редактор поддерживает все ключевые функции, которые вы ожидаете от достойного инструмента редактирования кода, такие как авто-завершение кода, подсветка синтаксиса и клавиатурные сокращения. Стили применяются в реальном времени после добавления.

Особенности синтаксиса

В свойствах компонентов есть два ключевых момента, характерных для редактора CSS:

  1. Нет выбора, если вы хотите применить стили непосредственно к "главному" HTML-элементу компонента, за который отвечает группа свойств. Среднее значение - возможность записи стилей без использования селектора {}. Это удобно для стилизации простых компонентов, таких как Подпись или Таймер.

  2. Селекторы, написанные в свойствах стилей компонентов, не требуют учета DOM панели инструментов за пределами компонента. Запускается подсчет с крайнего HTML-элемента самого компонента.

Помните о последней из перечисленных особенностей при использовании селекторов в пользовательских правилах CSS в свойствах компонентов. Это может быть причиной того, что пользовательские стили не применяются, несмотря на то, что селектор корректен с точки зрения классического HTML/CSS.

Поддержка SCSS

SCSS (сокращение от Sassy CSS) - это синтаксис языка сценариев препроцессора SASS, который интерпретируется или компилируется в CSS. Если вы настолько хорошо разбираетесь в стилях веб-компонентов, что уже не хотите возвращаться к родному CSS - мы и здесь вас подстрахуем.

Препроцессоры CSS - это, по сути, дополнения для CSS, которые позволяют более эффективно писать код благодаря поддержке расширенных правил синтаксиса.

Например, вы можете вложить стили, относящиеся к особым случаям, в общее правило:

div {
  margin: 20px;
  span {
    text-align: center;
  }
}

Текущая нотация приведет к следующему скомпилированному CSS:

div {
  margin: 20px;
}

div span {
  text-align: right;
}

Также можно создать циклы для применения различных стилей к элементам с похожими классами или ID:

$componentCount: 4
@for $i from 1 to $componentCount 
  #componentName#{$i} 
   background-color: salmon;
   height: 10px / $i

Текущая нотация приведет к следующему скомпилированному CSS:

#componentName1 {
  background-color: salmon;
  height: 10px;
}

#componentName2 {
  background-color: salmon;
  height: 20px;
}

#componentName3 {
  background-color: salmon;
  height: 30px;
}

Вы можете смешивать синтаксис SCSS и обычные обозначения CSS с обычными свойствами CSS, разрешенными редактором CSS, в пользовательском свойстве стиля, как вам захочется.

Was this page helpful?