薩斯 - 分組選擇

我有這樣的青菜代碼：薩斯 - 分組選擇

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-brand { 
    &:hover { 
    color: #fff; 
    } 
}

此輸出：

.navbar-default .navbar-nav > li > a:hover:hover, 
.navbar-default .navbar-brand:hover { 
    color: #fff; 
}

但我想：

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-brand, 
.navbar-default .navbar-brand:hover { 
    color: #fff; 
}

我如何使用相同的屬性在父母和孩子沒有重複與薩克斯父母？

來源

2016-01-15 ThemesCreator

試試這個：

$white: #fff; 
 

 
.navbar-default { 
 
\t .navbar-brand { 
 
\t \t color: $white; 
 
\t \t &:hover { 
 
\t \t \t color: $white; 
 
\t \t } 
 
\t } 
 
\t .navbar-nav > li > a:hover { 
 
\t \t color: $white; 
 
\t } 
 
}

來源

2016-01-15 13:53:11

這是一個優雅和清晰的解決方案，不是過於複雜（像我的）。 – richfinelli

這兩個答案都很好（@richfinelli和@Karl Dawson），非常感謝！但是，真誠的我在這種情況下沒有看到任何優勢，所以我會用標準的CSS來保存它，只是將顏色放在一個變量中。 – ThemesCreator

不幸的是，它不是真的有可能正是你在問什麼只與符號。＆符號（&）總是被父代選擇符替換。在你的情況下，父母選擇器。但你可以做的是從第一個選擇器中刪除:hover，並在@extend中折騰。我創建了一個名爲「.primary-color」的新選擇器，它將保存顏色。

.primary-color { 
    color: white; 
} 
.navbar-default .navbar-brand { 
    @extend .primary-color; 
} 
.navbar-default .navbar-nav > li > a, 
.navbar-default .navbar-brand { 
    &:hover { 
     @extend .primary-color; 
    } 
}

這編譯這個CSS：

.primary-color, .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-brand:hover { 
    color: white; 
}

@extend比它是如何編譯CSS一個mixin有點不同。我並不喜歡它是如何爲你創建額外的「.primary-color」類的，而是創建了你想要的東西。

雖然可能稍微複雜一點的設置，但它需要。我只是像你在你的問題中提到的那樣添加額外的父選擇器來獲得你想要的結果。

這是我在sass＆符寫的文章，可能會有所幫助。 https://css-tricks.com/the-sass-ampersand/

來源

2016-01-15 14:02:06 richfinelli

如果您將'.primary-color'更改爲'％primary-color'（一個Sass佔位符），然後將其用作'@extend：％primary-color'，則保存輸出的未使用類:) –

@Karl Dawsom - 那好多了。我以爲有這樣的事情！ – richfinelli

不用擔心，並感謝您的＆符文 - 我會在本週早些時候閱讀，以防萬一我忘記了一兩個使用它們的技巧。 –

薩斯 - 分組選擇

回答

相關問題