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到目前为止，我已经找到。