интерполировать значения sass между точками останова - PullRequest
Новая
       17

интерполировать значения sass между точками останова

0 голосов
/ 04 апреля 2019

У меня есть данные бэкэнда, которые вставляют класс в html-тег, чтобы форсировать соотношение изображения через sass / css с помощью трюка с отступом.Если вы устанавливаете высоту и ширину изображения на ноль и устанавливаете только верхний или нижний отступы, вы можете установить для него соотношение.

Это пример тега, который получает мой внешний интерфейс: 

<div class="responsiveimage--container small-ratio-4by3 medium-ratio-16by9 large-ratio-2by1"><picture>*picture stuff*</picture>

Тег изображения делает изображение отзывчивым.Я хочу применить различные соотношения в зависимости от классов, которые вставляются серверной частью, как показано выше.Вот мой пример, который не работает: 

.responsiveimage--container img {
  width: 100%;
  max-width: 100%;
}
%aspect-ratio-setting {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
  }
  > .content > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

$ratios: (
  16by9: 56.25%,
  4by3: 75%,
  1by1: 100%,
  2by1: 50%,
  3by1: 33.33%,
  4by1: 25%,
  1by2: 200%
);
.small-ratio-#{$value} { //$value from the div, ex: 4by3, 16by9, etc
  @extend %aspect-ratio-setting;
  &:before{
      padding-top: map-get($ratios, value );
  }
}

//large view
@media (min-width:  $breakpoint-lg) and (max-width: ($breakpoint-xl)-1) {
    .large-ratio-#{$value}{
        @extend .ratio-#{$value};
    }
}

//medium view
@media (min-width:  $breakpoint-md) and (max-width: ($breakpoint-lg)-1) {
    .medium-ratio-#{$value}{
        @extend .ratio-#{$value};
    }
}

//small view
@media (max-width: ($breakpoint-sm)-1) {
    .small-ratio-#{$value}{
        @extend .ratio-#{$value};
    }

}

Может ли это быть на самом деле scss?Подобная многоуровневая передача переменных / значений может уменьшить тонну кода внутри моих текущих классов sass.Спасибо.

...