Question

有两个不同的类，它们的值彼此相反。有没有办法通过优化的方式在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生成时对它们进行相对改变（比如我将旋转更改为45，从30开始，它将分别变为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;
    }
}

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

Answer 1

如果我们只考虑2＆＃34;方向＆＃34;，解决方案可能会更容易。

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

这里我们有2个相反的系数和2个相对的＆＃34;边和＃34;。上面的SCSS编译为：

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

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

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

1 个答案: