Question

我确实有一个包含多行的网格，每行都设置了一个转换操作：

第1行：transform: translateY(10px);

第2行：transform: translateY(20px);

第2行：transform: translateY(40px);

我想递增从每个翻译操作中提取5个像素，以获得类似的内容：

第1行：10- 1 x5 = 5 => transform: translateY(0px);

第2行：20- 2 x5 = 10 => transform: translateY(10px);

第2行：40- 3 x5 = 25 => transform: translateY(25px);

为此，我需要引用translateY()操作的旧设置值。这仅在SCSS中可行/可行吗？

Answer 1

您的问题没有有关如何在CSS中引用网格行的信息，因此我假设将它们标记为.rowN，其中N是从1开始的行号。可以在下面的代码中轻松更改。示例包括pow()函数的简单实现，因为您的10px, 20px, 40px...序列似乎是(2^(n-1))*10px。

@function pow($base, $exp) {
  @if ($exp == 0) {
    @return 1;
  }
  @if ($exp == 1) {
    @return $base;
  }
  $r: 1;
  @for $n from 0 through $exp - 1 {
    $r: $r * $base;
  }
  @return $r;
}

@for $n from 1 through 3 {
  .row#{$n} {
    transform: translateY(#{pow(2, $n - 1) * 10px - $n * 5px});
  }
}

在SCSS中获取当前属性值参考

1 个答案: