如何在Sass中为反向类或反向类创建循环？

有两个不同的类，它们的值彼此相反。有没有一种方法可以通过优化的方式在Sass中编写它们

例如：

.left-column{
    float: left;
    margin: 20px;
    padding-right: 20px;
    transform: rotateY(30deg);
}
.right-column{
    float: right;
    margin: 20px;
    padding-left: 20px;
    transform: rotateY(-30deg);
}

这两个类非常相似，除了一些值是相反的（右/左），一个是负数，另一个是正数。我希望能够通过一种介质更容易地更改它们的值，并在为CSS生成时使其相对更改（例如，我将旋转从30更改为45，并将分别更改为45和-45）

目前我有以下设置：

@each $direction, $distinctions in (
left: (left, right, 30),
right: (right, left, 30)
) {
    $_float: nth($distinctions, 1);
    $_padding: nth($distinctions, 2);
    $_transformation: nth($distinctions, 3);

    .#{$direction}-column {
        float: #{$_float};
        margin: 20px;
        padding-#{$_padding}: 20px;
        transform: rotateY(30deg * #{$_transformation});

        border-color: darken($primary-color, $min-difference-amount) $_border-color-right darken($primary-color, $min-difference-amount) $_border-color-left;
        #{$_ribbon-position}: -30px;
    }
}

我甚至不介意创建一个新的MIN或函数，因为这种场景可能会重复很多。

< P>如果我们只考虑2个“方向”，则解决方案会更容易。

@mixin mirror($side1) {
  $side2: right;
  $k1: 1;
  @if $side1 == right {
    $side2: left;
    $k1: -1;
  }
  $k2: $k1 * -1;

  float: $side1;
  margin: 20px * $k1;
  padding-#{$side2}: 20px;
  transform: rotateY(30deg * $k2);
}

.left-column {
  @include mirror(left);
}
.right-column {
  @include mirror(right);
}

这里我们有两个相反的系数和两个相反的“边”。上述SCS编译为：

.left-column {
  float: left;
  margin: 20px;
  padding-right: 20px;
  transform: rotateY(-30deg);
}

.right-column {
  float: right;
  margin: -20px;
  padding-left: 20px;
  transform: rotateY(30deg);
}

---

我喜欢！目前还不清楚发生了什么，所以这可能是为了减少重复而在可读性方面做出的妥协。希望在不久的将来会有一些更干净的方法来做到这一点。对于内容函数有一个简单的定义。我们拭目以待。。