Sass łączy rodzica za pomocą znaku handlowego „i” (&) z selektorami typów

Mam problem z zagnieżdżeniem w Sassie. Powiedzmy, że mam następujący kod HTML:

<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>

Kiedy próbuję zagnieździć moje style w następujący sposób, pojawia się błąd kompilacji:

.item {
    color: black;
    a& {
        color:blue;
   }
}

Jak odwołać się do selektora typu przed selektorem nadrzędnym, gdy jest on częścią tego samego elementu?

Jak podkreśla Kumar , było to możliwe od czasów Sassa 3.3.0.rc.1 (Maptastic Maple).

Dyrektywa @ at-root powoduje, że jedna lub więcej reguł jest emitowanych w katalogu głównym dokumentu, zamiast być zagnieżdżonych pod ich selektorami nadrzędnymi.

Możemy połączyć @at-rootdyrektywę z interpolacją,#{} aby osiągnąć zamierzony rezultat.

SASS

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

Wyjście CSS

.item {
    color: black;
}
a.item {
    color: blue;
}

Metoda @at-root-only nie rozwiąże problemu, jeśli zamierzasz przedłużyć najbliższy selektor w górę łańcucha. Jako przykład:

#id > .element {
    @at-root div#{&} {
        color: blue;
    }
}

Skompiluje się do:

div#id > .element {
    color: blue;
}

A co, jeśli .elementzamiast tego musisz dołączyć do swojego tagu #id?

W Sass jest funkcja o nazwie, selector-unify()która rozwiązuje ten problem. Używając tego z @at-root, można celować .element.

#id > .element {
    @at-root #{selector-unify(&, div)} {
        color: blue;
    }
}

Skompiluje się do:

#id > div.element {
    color: blue;
}

Na początek (w czasie pisania tej odpowiedzi) nie ma składni sass, która używa selektora & . Jeśli zamierzałeś zrobić coś takiego, potrzebowałbyś spacji między selektorem a ampersandem. Na przykład:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

Innym sposobem użycia znaku ampersand jest prawdopodobnie to, czego (niepoprawnie) szukasz:

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

Pozwala to na rozszerzenie selektorów o inne klasy, identyfikatory, pseudoselektory itp. Niestety w twoim przypadku teoretycznie skompilowałoby się to do czegoś takiego jak .itema, co oczywiście nie działa.

Możesz po prostu przemyśleć, jak piszesz CSS. Czy istnieje element nadrzędny, którego możesz użyć?

<div class="item">
    <p>text</p>
    <p>text</p>
    <a href="#">a link</a>
</div>

W ten sposób możesz łatwo napisać SASS w następujący sposób:

.item {
    p {
        // paragraph styles here
    }
    a {
        // anchor styles here
    }
}

(Uwaga dodatkowa: powinieneś przyjrzeć się swojemu htmlowi. Łączysz pojedyncze i podwójne cudzysłowy ORAZ umieszczasz atrybuty href w tagach p).

AFAIK W przypadku, gdy chcesz połączyć ampersand dla klasy i tagów w tym samym czasie, musisz użyć następującej składni:

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

skompiluje się do

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

Inne zastosowania (takie jak użycie klasy wcześniej @at-rootlub użycie wielu @at-root) doprowadzą do błędów.

Mam nadzieję, że to się przyda

Ta funkcja pojawiła się w najnowszej wersji Sass, 3.3.0.rc.1(Maptastic Maple)

Dwie ściśle powiązane funkcje, których będziesz potrzebować, to skryptowalny &, który możesz interpolować w zagnieżdżonych stylach, aby odwołać się do elementów nadrzędnych, oraz @at-rootdyrektywa, która umieszcza bezpośrednio następujący selektor lub blok css w katalogu głównym (nie będzie mieć rodziców w wyjściowym pliku css)

Więcej informacji znajdziesz w tym numerze na Githubie