search

postcss / postcss-mixins

PostCSS plugin for mixins
MIT License
466 stars 47 forks source link

Mixin error with expression in nth-shild #137

Closed ikh00000 closed 3 years ago

ikh00000 commented 3 years ago

I have some troubles with passing $number to nth-child expression in mixin. For now it works good if I delete calculations inside nth-child and leave just div:nth-child($number) . Would be thankful for helping to resolve it.

 @define-mixin mixinName $containerName, $number: 12 {
    :global(.desktop){
        & .$(containerName) > div:nth-child(30n + 22 + #{$number}) {
            /* some code */
        }
    }
}

@mixin mixinName container1, 9;
ai commented 3 years ago

The correct syntax:

@define-mixin mixinName $containerName, $number: 12 {
    :global(.desktop){
        & .$(containerName) > div:nth-child(30n + 22 + $number) {
            /* some code */
        }
    }
}

@mixin mixinName container1, 9;

But it will generate :nth-child(30n + 22 + 9), which is not correct nth-child syntax.

Solutions:

  1. Remove + 22 and use 31 in @mixin mixinName container1, 31.
  2. Use JS mixins to selector: & .${containerName} > div:nth-child(30n + ${number + 22}) https://github.com/postcss/postcss-mixins#function-mixin
ikh00000 commented 3 years ago

@ai Many thanks, the second solution looks pergect for me, but unfortunately doesn't works, may be because of project dependencies troubles. The first one works good