sass - 如何将多个内容 block 作为参数传递给 mixin？

Question

我希望能够做这样的事情:

.myTransitionableElement {
  transition: all .5s;

  .subChild { transition: all 1s }

  @include transitionKeyframes(
    start: {
      opacity: 0;
      transform: tranlsate(50px);

      .subChild {
        transform: rotate(45deg);
      }
    },
    end: {
      opacity: 1;
      transform: tranlsate(0);

      .subChild {
        transform: rotate(0);
      }
    }
  )
}


@mixin transitionKeyframes($args) {
  &.transitionStartKeyframe {
    @include map_get($args, "start");
  }
  &.transitionEndKeyframe {
    @include map_get($args, "end");
  }
}

最后应该等同于:

.myTransitionableElement {
  transition: all .5s;

  .subChild { transition: all 1s }

  &.transitionStartKeyframe {
    opacity: 0;
    transform: tranlsate(50px);

    .subChild {
      transform: rotate(45deg);
    }
  }
  &.transitionEndKeyframe {
    opacity: 1;
    transform: tranlsate(0);

    .subChild {
      transform: rotate(0);
    }
  }
}

这背后的原因是我想找到一种方法，每次使用使用这些类的 JS 抽象时都不必记住这些类名。

Answer 1

您不能在 SASS 混入中将不同的内容作为参数传递。以下是您可以使用 SASS 实现的示例。你能在这里具体说明你想要实现什么吗？

@mixin rtl() {
  &.ltr {
    @content;
    direction: ltr;
  }
  &.rtl {
    @content;
    direction: rtl;
  }
}

.parent {
  @include rtl {
   display: flex;
  }
}