玩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

回答

相關問題