玩scss函数

所以我得到了下面的代码设置。为什么最后一个标签不会将颜色从灰色变为红色？当我将totalTabs变量加1时，它确实会改变颜色，但对我来说这似乎很奇怪。也许这是一个小错字的地方，但我没有看到它...玩scss函数

<div class="tabs"> 
    <input id="tab1" type="radio" name="tabs" checked/> 
    <input id="tab2" type="radio" name="tabs"/> 
    <input id="tab3" type="radio" name="tabs"/> 
    <input id="tab4" type="radio" name="tabs"/> 
    <div class="tabs__labels"> 
    <label for="tab1">tab 001</label> 
    <label for="tab2">tab 002</label> 
    <label for="tab3">tab 003</label> 
    <label for="tab4">tab 004</label> 
    </div> 
    <div class="tabs__items"> 
    <div class="tabs__item">lorem ipsum dolor tab 001</div> 
    <div class="tabs__item">lorem ipsum dolor tab 002</div> 
    <div class="tabs__item">lorem ipsum dolor tab 003</div> 
    <div class="tabs__item">lorem ipsum dolor tab 004</div> 
</div>

到目前为止的造型......

.tabs { 
    position: relative; 
    width: 80%; 
    margin: 0 auto; 

    &__labels label { 
    cursor: pointer; 

    &:not(:last-child) { 
     margin-right: 2rem; 
    } 
    } 

    &__item { 
    padding: 2rem 0; 
    } 

    // the magic 
    $totalTabs: 4; 

    @for $i from 0 to $totalTabs { 
    [type=radio]:nth-child(#{$i}):checked ~ &__labels label:nth-child(#{$i}) { 
     color: red; 
    } 
    } 
}

来源

2017-04-23 Jeff

所以这是一个谎言。应该从......通过，从代替......到 – Jeff

这条线：

@for $i from 0 to $totalTabs {

应该如下：

@for $i from 0 through $totalTabs {

to关键字会在您的列表长度不足1个索引处停止循环。

来源

2017-04-24 17:27:44

由于一位同事的评论，我发现了这一点，但忘了在这里提及它。感谢评论，尽管... – Jeff

在改变“到”“到”解决了这个问题...感谢您的评论

来源

2017-04-29 16:17:29 Jeff

回答

相关问题