Question

我有一个用例，我必须根据两个变量定义元素的变换：$horizontal和$vertical。

但是，我最终会在转换中使用它们，这意味着我无法手动定义每个变量。

在伪代码中，它看起来如下：

@mixin pivotTranslate($horizontal, $vertical) {
  @if $horizontal = 'left'
    transform: translateX(-100%);
  @else if $horizontal = 'right':
    transform: translateX(100%);

  @if $vertical = 'top':
    transform: translateY(100%);
  @else if $vertical = 'bottom':
    transform: translateY(-100%);
}

但是，这似乎不起作用，因为转换将被“覆盖”。我真正想要做的是使用带有ifs的mixin来组合一个专门的变换，然后在最后将它们整齐在一起。

如何在sass中完成？

Answer 1

@mixin pivotTranslate($horizontal, $vertical) {
  $left-side: '';
  $right-side: '';

  @if $horizontal == 'left' {
    $left_side: translateX(-100%);
  }
  @else if $horizontal == 'right' {
    $left_side: translateX(100%);
  }

  @if $vertical == 'top' {
    $right-side: translateY(100%);
  }
  @else if $vertical == 'bottom' {
    $right-side: translateY(-100%);
  }

  transform: $left-side $right-side;
}

div {
  @include pivotTranslate('left', 'top');
}

/* CSS output generated */
div {
  transform: translateX(-100%) translateY(100%); }

初始化局部变量$left-side和$right-side，可以作为值传递给transform

我使用此代码简化了mixin。它具有相同的行为，唯一的区别是我使用翻译版本作为默认值而不是空字符串

@mixin pivotTranslate($horizontal, $vertical) {
  $left-side: translateX(-100%);
  $right-side: translateY(100%);
  @if $horizontal == 'right' {
    $left_side: translateX(100%);
  }
  @if $vertical == 'bottom' {
    $right-side: translateY(-100%);
  }
  transform: $left-side $right-side;
}

使用SASS中的变量组合专用变换

1 个答案: