CODEWITHSUNDEEP
htmlcsssassundefinedundefined-variable
Clark Fennell
Clark Fennell

Reputation: 65

SASS Undefined Variable issue

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.

Upvotes: 1

Views: 1170

Answers (2)

Pavel Keyzik
Pavel Keyzik

Reputation: 34

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

@for
your code

Write this

@for
   your code

Upvotes: 0

Aaron Christiansen
Aaron Christiansen

Reputation: 11837

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.

Upvotes: 2

Related Questions