Question

我想每个人都会明白，我会尝试：

  @each $num, $mult, $space in ('01', 1, '16px'), ('02', 2, '32px'), ('03', 3, '48px'), ('04', 4, '64px'), ('05', 5, '80px'), ('06', 6, '96px') {
    &.item-#{$num} {
      right: $sideNavWidth * $mult + $space;
    }
  }

但是项目01的最终结果是：右：＆＃34; 320px16px＆＃34 ;;这是无效的......为什么Node-Sass不给我一个干净的结果？我的阵列出了什么问题？

与之相同：

  &.item-01 {
    right: $sideNavWidth + 16px;
  }
  &.item-02 {
    right: $sideNavWidth * 2 + 32px;
  }
  &.item-03 {
    right: $sideNavWidth * 3 + 48px;
  }
  &.item-04 {
    right: $sideNavWidth * 4 + 64px;
  }
  &.item-05 {
    right: $sideNavWidth * 5 + 80px;
  }
  &.item-06 {
    right: $sideNavWidth * 6 + 96px;
  }

结束结果必须是：

.item-01{right:336px}
  .item-02{right:672px}
  .item-03{right:1008px}
  .item-04{right:1344px}
  .item-05{right:1680px}
  .item-06{right:2016px}

任何人都会看到更聪明的方法，我尝试做什么？

最好的问候。

Answer 1

从数组中的像素值中删除引号。

像这样：

$sideNavWidth: 320px;

.e {
  @each $num, $mult, $space in ('01', 1, 16px), ('02', 2, 32px), ('03', 3, 48px), ('04', 4, 64px), ('05', 5, 80px), ('06', 6, 96px) {
    &.item-#{$num} {
      right: $sideNavWidth * $mult + $space;
    }
  }
}

在评论中你要求更有效的方法，所以我提出了这个：

$sideNavWidth: 320px;

.n {
  @for $i from 1 through 6 {
    $z: '';
    @if ($i < 10) { $z: '0'; }
    &.item-#{$z}#{$i} {
      right: ($sideNavWidth * $i) + (($i * 2) * 8);
    }
  }
}

SCSS - 简单的每个数组

1 个答案: