csstools/precss

Sass keywords 'to' and 'through' in a @For loop.

sanvyx opened this issue · 2 comments

Sass keywords to and through works the same way in a @For loop.
For example:

@for $i from 1 to 3 {
  h#{$i} { 
    font-size: #{$i}em;
  }
}

@for $i from 1 through 3 {
  h#{$i} { 
    font-size: #{$i}em;
  }
} 

Result:

h1 { 
    font-size: 1em;
}

h2 { 
    font-size: 2em;
}

h3 { 
    font-size: 3em;
}

According to Sass docs:
In directive @for $var from <start> through <end> the range includes the values of <start> and <end>

In directive @for $var from <start> to <end> the range should not include <end> value.

Precss is not compiling the following sass statement

@for $i from $minMultiplier to $maxMultiplier
{
#{if(&, "&", "*")}.#{$selectorName}-#{$i} {
#{$propertyName}: ($i * round($propertyMultiplicand))
}
}

I am getting the following error

Fatal error: precss: /Users/utilities/math.scss:70:9: Unknown word 68 | @for $i from $minMultiplier to $maxMultiplier
69 | {

70 | #{if(&, "&", "*")}.#{$selectorName}-#{$i} {
| ^
71 | #{$propertyName}: ($i * round($propertyMultiplicand))
72 | }

Any thoughts...

@sanvyx If it will still make no difference whether you use to or through (using the newest version 4.0.0) this problem belongs to PostCSS-advanced-variables.
Details about @for: https://github.com/jonathantneal/postcss-advanced-variables#for-and-each-rules

@hawckins it appears to be the same problem as #114. I provided a potential solution there. Please provide feedback if this solved your issue.