csstools/precss

cannot assign variable again inside if statement

mitsuru793 opened this issue · 1 comments

Can't precss assign variable inside if statement?
I use the following plugin. I can use calc at to assign variable.
https://github.com/postcss/postcss-calc

input code

$max: 3;
@for $i from 0 to $max {
  $next: -1;
  @if $i < $max {
    $next: calc($i + 1);
    #id_inside-$next {}
  }
  @else {
    $next: 0;
    #id_inside-$next {}
  }
  #id_$next {}
}

output code

#id_inside-1 {}
#id_-1 {}
#id_inside-2 {}
#id_-1 {}
#id_inside-3 {}
#id_-1 {}
#id_inside-0 {}
#id_-1 {}

The problem is the way block scoping works on these variables. If you assign the variable inside an @if, that value is only applied inside that block… it doesn’t persist after the closing brace.

I don’t know if @if/@else should have different scoping rules, or if there should be a way to indicate you want a value to be applied up a scope, but I would like a way to accomplish this as well.