SASS未定义变量问题

Question

我的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

提前感谢您的帮助。

Answer 1

在问题的代码中，两个@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循环的范围内可用。

Answer 2

您需要在@for部分中添加Tab或空格。代替

@for
your code

写入此

@for
your code