snippet.scss

Мы используем scss и методолгию БЭМ.

Доступные миксины:

@mixin background-color($color) {
  $dark_selector: '[style*="#{$color}-is-dark:true"]';
  $light_selector: '[style*="#{$color}-is-light:true"]';
  background-color: var(#{$color});
  @at-root #{selector-append($dark_selector, &)} {
    color: var(--color-text-light);
    --color-text: var(--color-text-light);
    --color-text-minor-shade: var(--color-text-light-minor-shade);
    --color-text-major-shade: var(--color-text-light-major-shade);
    --color-text-half-shade: var(--color-text-light-half-shade);
  }
  @at-root #{selector-append($light_selector, &)} {
    color: var(--color-text-dark);
    --color-text: var(--color-text-dark);
    --color-text-minor-shade: var(--color-text-dark-minor-shade);
    --color-text-major-shade: var(--color-text-dark-major-shade);
    --color-text-half-shade: var(--color-text-dark-half-shade);
  }
}

Можно использовать уже готовый миксин, чтобы при изменении цвета фона, цвет текста менялся на читаемый:

@include background-color(--bg);

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

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

&[style*="--btn-position-vertical-1:100%"][style*="--btn-position-horizontal-1:0"]{
  .banner-list__item:nth-child(2n + 1) {
    .banner-list__item-title {
      margin: -2rem 0 0 2rem;
      transform: translateX(calc(var(--btn-position-horizontal-1) * -1%)) translateY(calc(var(--btn-position-vertical-1) * -1));
      @media screen and (max-width: 767px) {
        margin: -1rem 0 0 1rem;
      }
    }
  }
}

где:

• & - автоматически генерируемый класс виджета
• article-hide-photo - "name":"article-hide-photo" наименование настройки, которые мы задаем в setting_form.json и прописываем настройки по умолчанию в - setting_data.json

Учитываем две настройки одновременно:

&[style*="--btn-position-vertical-1:100%"][style*="--btn-position-horizontal-1:0"]{
  .banner-list__item:nth-child(2n + 1) {
    .banner-list__item-title {
      margin: -2rem 0 0 2rem;
      transform: translateX(calc(var(--btn-position-horizontal-1) * -1%)) translateY(calc(var(--btn-position-vertical-1) * -1));
      @media screen and (max-width: 767px) {
        margin: -1rem 0 0 1rem;
      }
    }
  }
}

Переменные

С полным списком переменных можно ознакомится по ссылке, а посмотреть как они работают по ссылке

Пример:

.reviews {
  .date {
    color: var(--color-text-half-shade);
  }
  .author {
    font-size: 1.1rem;
    font-weight: bold;
  }
}

Мы используем методолгию БЭМ, grid-areas и поддерживаем последние версии браузеров.

Пример:

.product {
  display: grid;
  grid-template-areas: "photo info"
                       "photo title"
                               "photo price"
                       "photo variants"
                       "photo description"
                               "photo properties"
                       "photo buy"
                       "photo calculate-delivery"
                       "photo link";
  grid-template-columns: 40% 1fr;
  grid-template-rows: repeat(7,auto) 1fr;
  grid-column-gap: 2rem;
  &__area-photo {
    grid-area: photo;
    min-width: 0;
    position: relative;
  }
  &__area-title {
    grid-area: title;
  }
}