SASS Неопределенная переменная проблема

Я столкнулся с проблемой с моим нахальным. Я продолжаю приветствовать появление неопределенной переменной и не знаю почему. Код разработан, чтобы сделать индикатор позади моей панели навигации больше, когда курсор наведен. Есть идеи?

Ошибка выглядит следующим образом:

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

Ниже приведен код SASS:

$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

Заранее спасибо за помощь.

Источник

2 ответа

Решение

В коде вашего вопроса, тело обоих @for петли пустые:

Вы должны отступить от правил, которые являются частью вашего @for цикл, так что они включены в цикл:

$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

$i переменная доступна только в рамках @for петля.

Источник

Вам нужно добавить Tab или пробелы в разделе @for. Вместо

@for
your code

Напиши это

@for
   your code
Источник
Другие вопросы по тегам