SASS Undefined Variable issue

Question

I've come across an issue with my sass. I keep greeting an undefined variable error come up and I'm unsure why. The code is designed to make the indicator behind my navigation bar more when the cursor hovers. Any ideas?

The error comes up as the following:

Error: Undefined Variable: "$i". on Line 93 of style.sass.

Below is SASS code:

$menu-items: 5
$menu-items-loop-offset: $menu-items - 1
$width: (100/$menu-items) * 1%

.with-indicator
    @for $i from 1 through $menu-items-loop-offset
    .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:after
    left: ($width*$i)-$width
    .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before
    left: ($width*$i)+($width/2)-$width



    @for $i from 1 through $menu-items-loop-offset
    .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:after
    left: ($width*$i)-$width !important
    .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before
    left: ($width*$i)+($width/2)-$width !important


.Nav-item
    &:last-child
    &:hover, &.is-active
    &:before
    left: (100%-$width)+($width/2) !important
    &:after
    left: 100%-$width !important

Thanks in advance for the help.

Answer 1

In your question's code, the body of both @for loops is empty:

You need to indent the rules which are part of your @for loop, so that they are included in the loop:

$menu-items: 5
$menu-items-loop-offset: $menu-items - 1
$width: (100/$menu-items) * 1%

.with-indicator
    @for $i from 1 through $menu-items-loop-offset
        .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:after
        left: ($width*$i)-$width
        .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before
        left: ($width*$i)+($width/2)-$width



    @for $i from 1 through $menu-items-loop-offset
        .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:after
        left: ($width*$i)-$width !important
        .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before
        left: ($width*$i)+($width/2)-$width !important


.Nav-item
    &:last-child
    &:hover, &.is-active
    &:before
    left: (100%-$width)+($width/2) !important
    &:after
    left: 100%-$width !important

The $i variable is available only within the scope of the @for loop.

Answer 2

You need to add Tab or spaces in @for section. Instead of

@for
your code

Write this

@for
   your code