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.
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.