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.