Hello Universe - 2 months ago 11

Sass (Sass) Question

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));
```

Source (Stackoverflow)

Comments