Sass: Variables (Documentation)

[aiman99aleryany]

I am not sure if I should write this issue here, but here we go! as you see in this picture from the documentation of sass here about the variables. It says that flow control statements can't create/declare new variables, which is not true

@if 1 {
 $index: 20px;
 @debug $index;
}

@for $i from 1 through 4 {
  $index: 20px;
  @debug $index;
}

In both cases above, the variables are declared and debugged without prompting any errors, as long as I am using the variables inside the flow control.. maybe you should specify that in the documentation because it creates some confusion for beginners like me. have a great day!

[WebMechanic]

.. but they can't declare new variables there.

the key word is "there" -- in the outer scope, not that they can't declare variables at all. They sure can within their inner scope, which is what your code perfectly depicts. In order to change a "global" or "outer scope" variable it needs to exist *there first.

$index: 10px;
@debug $index; // 10px

@if 1 {
 $index: 20px;
}
@debug $index; // 20px

[aiman99aleryany]

@WebMechanic Thank you for your kind reply.. I understand what it meant now, if they could make it clearer in the documentation to the Non-native English speakers. By specifying that *there keyword references the global scope. Thanks in advance.