css - 如何修复 @each 指令的 SCSS 编译错误？

Question

我正在创建一个使用 SCSS 主题液体的 Shopify 主题。但是，当它尝试编译时，我不断收到此错误消息:

Failed to compile SCSS file. Syntax error: Invalid CSS after "@each $ratio-name": expected "in", was ", $ratio-height..." on line 90 of /s/files/1/1492/9806/t/78/assets/grid.scss

我开始怀疑这是否是我将@each 字符串组合在一起的方式？从我的 Angular 来看，我写的代码是正确的，但这可能是我学习代码的方式有误。

如能提供有关如何修复此错误的任何指导，我们将不胜感激。

更新: 我发现 Shopify 使用的是 SASS 3.2，它可能不支持这个更新的指令。有谁知道实现此规则的简化或“老派”方式？

我的代码:

$ratios: (
  (ratio-16-9, 9, 16),
  (ratio-3-4, 3, 4),
  (ratio-1-1, 1, 1)
) !default;

@each $ratio-name, $ratio-height, $ratio-width in $ratios {
  .#{$ratio-name} {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;

    &::after {
      content: '';
      display: block;
      height: 0;
      padding-bottom: calc((#{$ratio-height} / #{$ratio-width}) * 100%);
      width: 100%;
    }

    iframe,
    video,
    img {
      height: 100.5%;
      left: 50%;
      perspective: 1px;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100.5%;
      z-index: 2;
    }

    .fit {
      font-family: 'object-fit: cover; object-position: center;';
      object-fit: cover;
      object-position: center;
    }
  }
}

Answer 1

我非常确定 sass 3.2 也支持 @each 循环。但是，解构功能不是。要解决此问题，您可以只在 @each 循环中使用一个变量而不是三个变量，并在循环内分配您需要的新变量 - 如下所示:

$ratios: (
  (ratio-16-9, 9, 16),
  (ratio-3-4, 3, 4),
  (ratio-1-1, 1, 1)
) !default;

@each $ratio-item in $ratios {
  $ratio-name: nth($ratio-item, 1);
  $ratio-height: nth($ratio-item, 2);
  $ratio-width: nth($ratio-item, 3);

  .#{$ratio-name} {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;

    &::after {
      content: '';
      display: block;
      height: 0;
      padding-bottom: calc((#{$ratio-height} / #{$ratio-width}) * 100%);
      width: 100%;
    }

    iframe,
    video,
    img {
      height: 100.5%;
      left: 50%;
      perspective: 1px;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100.5%;
      z-index: 2;
    }

    .fit {
      font-family: 'object-fit: cover; object-position: center;';
      object-fit: cover;
      object-position: center;
    }
  }
}