Question

我有后端数据，该数据将类插入html标记中，以使用padding-top技巧通过sass / css强制图像的比率。如果将图像的高度和宽度设置为零，而仅将padding-top或padding-bottom设置为高，则可以在其上设置比例。

这是前端收到的标签的示例：

<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类内部的大量代码。谢谢。

在断点之间插入sass值

0 个答案: