1

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

在此先感谢您的帮助。

4

2 回答 2

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循环范围内可用。

于 2018-08-04T15:05:34.530 回答
0

您需要在 @for 部分添加制表符或空格。代替

@for
your code

写这个

@for
   your code
于 2018-08-04T15:09:08.170 回答