Kieranmv95 Kieranmv95 - 4 months ago 14
Sass (Sass) Question

SCSS for loop with odd syntax works but getting syntax errors

Hi i create a for loop to generate classes similar to how bootstrap does its grid system but with flexbox and i am wondering if anyone knows why im getting this error.

@for $i from 1 through 12 {
.flex-#{$i} {
flex: 0 #{$i} 8.333333333333333 * $i + % ;
padding: 0 $default-spacing;
}
}


it all compiles perfectly i just get a syntax error on this line

flex: 0 #{$i} 8.333333333333333 * $i + % ;


maybe its IDE base, im using the latest version of webstorm.

Any ideas?

Thanks, kieran.

Answer

If you you want concatenate a string must be quoted but you get a string:

SASS

flex: 0 #{$i} 8.333333333333333 * $i + "%"

Output

flex: 0 1 "8.33333%";

In your case is better multiplicate for 1% to get a number with percentage unit

SASS

@for $i from 1 through 12 {
    .flex-#{$i} {
        flex: 0 #{$i} 8.333333333333333 * $i * 1% ;
        padding: 0 10px;
    }
}

Output

.flex-1 {
  flex: 0 1 8.33333%;
  padding: 0 10px;
}

.flex-2 {
  flex: 0 2 16.66667%;
  padding: 0 10px;
}
 ...