snippet.scss

Файл предназначен для написания CSS стилей. Как правило используется SCSS и методология БЭМ.

Html код виджета располагается внутри родительского элемента div с классом layout и уникального класса виджета. Чтобы написать стили к уникальному родительскому классу виджета в стилях используется символ &.

& {
  border-bottom: 1px solid var(--bg-minor-shade);
  box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.1);
  position: relative;
}

&[style*="--article-hide-photo:true"] {
  .article-photo {
    display: none!important;
  }
}

- article-hide-photo - автоматически подставляется к родительскому классу виджета в атрибут style.
- В snippet.css виджета прописываются стили для разных состояний настроек. "name":"article-hide-photo" - наименование настройки в редакторе, которую прописываем в setting_form.json.

У родительского класса layout при изменении настроек в редакторе меняется значение css переменных.

<div class="layout banner_3" style="--layout-wide-bg:true; --layout-pt:2vw; --layout-pb:2vw; --layout-wide-content:false; --layout-edge:true; --hide-desktop:false; --hide-mobile:false;">
  <div class="layout__content">
    <div class="banner-list__item">  
    </div>
  </div>
</div>

В стилях можно прописывать разные состояния, указывая значения настроек, пример:

&[style*="--hide-favorites:true"][style*="--hide-personal:false"] {
  .navigation-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}

Переменные

На странице с виджетами подключаются стили core.css. В core.css к определенным классам прописаны стили с css-переменными, которые меняют свое значение при изменении настроек шаблона и настроек виджета в редакторе (шрифты, цвета кнопок и т.п). Также прописаны переменные со значениями, которые можно использовать или переопределять. Подробнее можно узнать здесь.

Пример:

& {
  --grid-list-min-width: 190px;
  --grid-list-row-gap: 1rem;
  --grid-list-column-gap: 2rem;

  @media screen and (max-width: 767px) {
    --grid-list-min-width: 50%;
  }
}

В данном примере меняется значение переменных --grid-list-min-width, --grid-list-row-gap, --grid-list-column-gap в стилях виджета.