Получите сайт "под ключ" за 20 дней: удобный функционал, современный дизайн, более
200 интеграций
для бизнеса Реклама. ООО «Инсейлс Рус»‎ ИНН 771484376 erid: 2Ranynxjx8G

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 в стилях виджета.

Оставить оценку

Оценка успешно отправлена.
Она будет проверена администратором перед публикацией.
Перед публикацией все оценки проходят модерацию

Оценки: 0

Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!
Нажимая кнопку «Зарегистрироваться», я принимаю Пользовательское соглашение и Политику конфиденциальности
Недавно просмотренные статьи
Продолжая пользоваться сайтом,
вы соглашаетесь с использованием cookie