Question

我正在为汉堡包菜单开发一个实用程序/帮助程序类，这需要一些数学来确保正确的栏之间的间距。我正在尝试使用嵌套列表来遍历条size - 2(px)和3(px)，以及3种不同大小的间距。我试图从地图键（2,3）中提取菜单行大小，但是我在制作这个工作时遇到了一些麻烦。现在，$px-variable输出整个列表，有没有办法让它以整数（2和3）输出密钥？

$menus: (
  2: ( s: 14, m: 19, l: 22),
  3: ( s: 22, m: 25, l: 29)
);
@each $menu in $menus {
  @each $key, $sz in $menu {
    .menu-#{$px}px-#{$key} {
      $menu-height: $sz * 1px;
      $menu-line: $px * 1px;
      $menu-space: ($menu-height - ($menu-line*3))/2;

      height: $menu-height;
      width: $menu-height*1.33;

      span {
        &, &:before, &:after { height: $menu-line; }
        & { margin-top: $menu-space + $menu-line; }
        &:before { margin-top: -$menu-space; }
        &:after { margin-top: $menu-space; }
      }
    }
  }
}

我希望循环输出六个菜单类，如下所示：

.menu-2px-s {
      $menu-height: 14px;
      $menu-line: 2px;
      ...
}
.menu-2px-m {
      $menu-height: 19px;
      $menu-line: 2px;
      ...
}
.menu-2px-l {
      $menu-height: 22px;
      $menu-line: 2px;
      ...
}
.menu-3px-s {
      $menu-height: 22px;
      $menu-line: 2px;
      ...
}
.menu-3px-m {
      $menu-height: 25px;
      $menu-line: 2px;
      ...
}
.menu-3px-l {
      $menu-height: 29px;
      $menu-line: 2px;
      ...
}

Answer 1

您需要在第一次迭代中获取密钥。您还使用了未定义的变量$px。

$menus: (
  2: ( s: 14, m: 19, l: 22),
  3: ( s: 22, m: 25, l: 29)
);
@each $num, $menu in $menus {
  @each $key, $sz in $menu {
    .menu-#{$num}px-#{$key} {
      $menu-height: $sz * 1px;
      $menu-line: $num * 1px;
      $menu-space: ($menu-height - ($menu-line*3))/2;

      height: $menu-height;
      width: $menu-height*1.33;

      span {
        &, &:before, &:after { height: $menu-line; }
        & { margin-top: $menu-space + $menu-line; }
        &:before { margin-top: -$menu-space; }
        &:after { margin-top: $menu-space; }
      }
    }
  }
}

使用sass映射键作为变量

1 个答案: