sass - tutorial - 如何在最後引用父選擇器?




sass意思 (2)

這個問題在這裡已經有了答案:

我怎樣才能把這個:

.btn-primary {
  .open .dropdown-toggle.btn-primary { ... }
}

.btn-primary {
  .open .dropdown-toggle& { ... }
}

.dropdown-toggle後,我一直得到無效的選擇器


沒有冒犯,但我不知道你明白什麼是用於..以防萬一我在這裡是解釋:

有時候,使用嵌套規則的父選擇器是非常有用的。 例如,您可能希望在選擇器懸停時或者body元素具有特定類時具有特殊樣式。 在這些情況下,可以使用&字符明確指定要插入父選擇器的位置。

例:

p{
    background: red;

    &:hover{
        background: blue;
    }

    &:active {
       background: blue; 
    }
} 

其中將被轉換為:

p {
    background:red;
}

p:hover {
    background:red;
}

p:active {
    background:red;
}

如果你讀完整的錯誤,應該這樣說:

“&”只能用在復合選擇器的開頭。

但是.dropdown-toggle.btn-primary.btn-primary.dropdown-toggle是一樣的。 所以把父母選擇器放在開頭:

.btn-primary {
  .open &.dropdown-toggle { color: blue; }
}

Sass 3.4開始 ,你可以這樣做:

.btn-primary {
  .open .dropdown-toggle#{&} { color: blue; }
}






sass