Question

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

    &: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

@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 并且如果使用数字操作则不要使用插值，在减法符号之前和之后留一个空格：

  @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个孩子转换为mixin

2 个答案: