如何将第n个孩子转换为mixin

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 widget-angle($num) { 
    &:nth-child(#{$num}n) { 
    @include transform(rotate((30 *(#{$num}n-1)) deg) skew(60deg)); 
    } 
} 

Answer 1

这里有一个错误：(30 *(#{$num}n-1)，你必须删除ñ，如果你不使用插值用数字操作时，减号前后留出空间：

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