Search code examples
dartsassscss-mixinscodekit

Dart SCSS rejecting $ syntax

I'm using Codekit to compile and process SCSS, and recently it was recommended to upgrade from Liblass to Dart, for future proofing.

This seems to be an easy switchover, however I do have one snippet of code that is throwing an error during compilation. I wonder if anyone might be able to assist with? The error is: Dart Sass failed with this error: Error: expected "$".

The code in question is intended to iterate over a number of nth-child() elements and incrementally apply a transition-delay to them, increasing by 150ms per item.

@for $i from 1 to 50 {
  &:nth-child($i) { transition-delay: calc($i * 150ms); }
}

Thank you.

Solution

  • You need to interpolate the variable:

    @for $i from 1 to 50 {
  &:nth-child(#{$i}) { transition-delay: calc(#{$i} * 150ms); }
}