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