Hello Universe Hello Universe - 4 months ago 19
Sass (Sass) Question

How to convert n-th child to a mixin

In scss, I have a code as below. I will like to convert that to a mixin with parameters passed for rotate and skew degrees... May somehow help me in converting this to a 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));
}


I thought of doing like below. However, it does not seem to be working

@include widget-angle(n);


and the mixin

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

Answer

You have a mistake here: (30 *(#{$num}n-1), you have to remove the n and don't use interpolation if you are operating with numbers, leave a space before and after the subtraction sign:

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