SASS家長選擇用@在根

Question

我：

.parent { 
    &.change { 
    .logo { 
     width:100px; 
    } 
    } 
} 


.logo { 
    &.logo--one { 
    border:1px solid #ccc; 
    } 
    &.logo--two { 
    border:1px solid #ddd; 
    } 
    &.logo--tree { 
    border:1px solid #fff; 
    } 
} 

我想從每個標誌名稱的內部能夠改變像

.parent.change .logo.logo--one {} 

選擇，而不必重複標識名稱。我有很多徽標名稱。象下面這樣代碼的東西確實是需要的不是工作

.logo { 
    &.logo--one { 
    border:1px solid #ccc; 
    @at-root .what__should__be__here { 
     width:100px; 
    } 
    } 
    &.logo--two { 
    border:1px solid #ddd; 
    @at-root .what__should__be__here { 
     width:100px; 
    } 
    } 
    &.logo--tree { 
    border:1px solid #fff; 
    @at-root .what__should__be__here { 
     width:100px; 
    } 
    } 
} 

你可以用它在這裏打球，我認爲：http://sassmeister.com/gist/21b2886c6a572446684c

Answer 1

我錯過了&（這是不是真的直觀，但工程） 。我發現這裏的解決方案：http://davidwalsh.name/future-sass

這是結果：http://sassmeister.com/gist/9ebc671927a4dacd6405

.parent { 
    &.change { 
    .logo { 
     width:100px; 
    } 
    } 
} 


.logo { 
    &.logo--one { 
    border:1px solid #ccc; 
    @at-root .parent.change & { 
     width:100px; 
    } 
    } 
    &.logo--two { 
    border:1px solid #ddd; 
    @at-root .parent.change & { 
     width:120px; 
    } 
    } 
    &.logo--tree { 
    border:1px solid #fff; 
    @at-root .parent.change & { 
     width:130px; 
    } 
    } 
} 

這是最好的使用情況@at-root到目前爲止，我已經找到。