如何将 n-th child 转换为混入

Question

在scss中，我有如下代码。我想将其转换为带有旋转和倾斜度传递参数的混合...可以以某种方式帮助我将其转换为混合？

    &:first-child {
      @include transform(rotate(0deg) skew(60deg));
    }

    &:nth-child(2) {
      @include transform(rotate(30deg) skew(60deg));
    }

    &:nth-child(3) {
      @include transform(rotate(60deg) skew(60deg));
    }

    &:nth-child(4) {
      @include transform(rotate(90deg) skew(60deg));
    }

    &:nth-child(5) {
      @include transform(rotate(120deg) skew(60deg));
    }

    &:nth-child(6) {
      @include transform(rotate(150deg) skew(60deg));
    }

我想像下面那样做。但是，它似乎没有用

   @include widget-angle(n);

和混合

@mixin widget-angle($num) {
  &:nth-child(#{$num}n) {
    @include transform(rotate((30 *(#{$num}n-1)) deg) skew(60deg));
  }
}

Answer 1

你这里有一个错误：(30 *(#{$num}n-1)，你必须去掉n并且如果你是用数字操作的话不要使用插值，留下一个space减号前后：

  @include transform(rotate((30 *($num - 1))deg) skew(60deg));

Answer 2

我最终得到了如下结果

@mixin widget-angle($num) {
  &:nth-child(#{$num}) {
    @include transform(rotate((30 *( $num - 1 ))+deg) skew(60deg));
  }
}

而且，

    @for $i from 1 through 6 {
      @include widget-angle($i);
    }

如何将 n-th child 转换为混入

How to convert n-th child to a mixin

sass

mixins