Sass ampersand, wybierz bezpośredni rodzic?

Question

Czy w Sass można używać ampersand do wybierania bezpośredniego rodzica, a nie selektora nadrzędnego całej grupy? Na przykład:

.wrapper{ 
    background-color: $colour_nav_bg; 
    h1{ 
     color: $colour_inactive; 
     .active &{ 
      color: red; 
     } 
    } 
} 

kompiluje do:

.wrapper h1{ 
    color: grey; 
} 

.active .wrapper h1{ 
    color: red 
} 

ale co ja właściwie chcę to:

.wrapper .active h1{ 
    color: red; 
} 

jest jedyną opcją, aby napisać SCSS jak tak?

.wrapper{ 
    background-color: $colour_nav_bg; 
    h1{ 
     color: $colour_inactive; 
    } 
    .active h1{ 
     color: red; 
    } 
} 

HTML wygląda następująco:

<ul class="wrapper"> 
    <li class="active"> 
     <h1>blah</h1> 
    </li> 
</ul> 

Answer 1

Jak to pisze, nie ma selektor Sass do bezpośredniego rodzica zamiast głównego nadrzędnego elementu. Istnieje &, który (jak wiadomo) wybiera rodzica root. Istnieje również %placeholder selectors, która ukrywa regułę, dopóki nie zostanie extended.

Sass to open-sourced, więc możesz dodać nowy selektor "bezpośredni rodzic".

Answer 2

Można obejść ten dzisiejszy z wstawek jak ten:

@mixin if-direct-parent($parent-selector) { 
    $current-sequences: &; 
    $new-sequences:(); 

    @each $sequence in $current-sequences { 
    $current-selector: nth($sequence, -1); 
    $prepended-selector: join($parent-selector, $current-selector); 
    $new-sequence: set-nth($sequence, -1, $prepended-selector); 
    $new-sequences: append($new-sequences, $new-sequence, comma); 
    } 

    @at-root #{$new-sequences} { 
    @content; 
    } 
} 

Od momentu & jest zasadniczo lista list, można użyć funkcji list (nth, set-nth, join i append), aby utworzyć wybrana sekwencja selektora. Następnie użyj @at-root, aby wyprowadzić nowy selektor na poziomie root. Oto jak chcesz go używać:

.grandparent-1, 
.grandparent-2 { 
    color: red; 

    .child { 
    color: blue; 

    @include if-direct-parent('.parent') { 
     color: green; 
    } 
    } 
} 

Które wyjście:

.grandparent-1, 
.grandparent-2 { 
    color: red; 
} 
.grandparent-1 .child, 
.grandparent-2 .child { 
    color: blue; 
} 
.grandparent-1 .parent .child, .grandparent-2 .parent .child { 
    color: green; 
} 

Answer 3

Nieraz chciałem zrobić co pytasz i jego nie odchodzenie. Słyszałem, że możesz robić takie rzeczy w Stylusie. Ale jest jeszcze jedna rzecz, którą możesz wypróbować, aby użyć teleportacji poza swoim drzewem zagnieżdżania za pomocą @at-root. Na przykład:

.wrapper{ 
    h1{ 
     @at-root .wrapper .active h1 { 
      color: red; 
     } 
    } 
} 

ten powinien skompilować dół do następujących:

.wrapper .active h1 { 
    color: red; 
} 

Miły część jest zachować selektor gdzie logiczny sens w zagnieżdżenia struktury do celów organizacyjnych.

Answer 4

Trzeba owinąć @ treści na korzeń w {}

.wrapper { 
    h1 { 
     @at-root { 
      .wrapper .active h1 { 
       color: red; 
      } 
     } 
    } 
}