Получить ссылку на текущее значение свойства внутри SCSS

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});
  }
}