Question

This is the mixin I wrote (.scss format), but I’m getting this error:

Invalid CSS after “($x) “: expected expression (e.g. 1px, bold), was “{“

@mixin x_cards_wide($x) {
  .card {
    &:nth-child(-n + $x) { margin-top:   0; }
    &:nth-child($x *  n) { margin-right: 0; }
  }
}

Check it out on CodePen

Answer 1

You can accomplish this using interpolations:

@mixin x_cards_wide($x) {
  .card {
    &:nth-child(-n+#{$x}) { margin-top: 0; }
    &:nth-child(#{$x}n) { margin-right: 0; }
  }
}