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?
Odpowiedzi:
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;
}
.item a.itemjakiegoś powodu. Próbowałem też robić a#{&}to samodzielnie i wciąż ten sam wynik.
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;
}
#id > .element #id > div.element { color: blue; }. Innym podejściem byłoby użycie selector_replacerozszerzenia #id { > .element { @at-root #{selector-replace(&,'.element', 'div.element')} { color: blue;}}}. Oto streszczenie dla lepszej czytelności.
selector-replacejest też innym sposobem, aby to zrobić, ale wymaga znajomości tego selektora. Ta selector-unifymetoda ma tę zaletę, że jest stosowana w mieszankach.
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).
hreftag na a, pżeby napisał działający CSS.
.item { a& }i nie ma do tego składni sass (o ile wiem. Sugerowałem, że prawdopodobnie szukał czegoś takiego jak składnia ampersand, którą opisałeś, która jest używana dość regularnie w Sass. Jednak opierając się na przykładzie OP, .item { &a }to nieważne i zostanie skompilowane do.itema . Tak jak powiedziałem w mojej odpowiedzi. Czy jest coś, czego mi brakuje?
.item { a& { ... } }Potrzebny był OP, który teraz można zrobić, jak wskazuje @Blaine .item { @at-root a#{&} { ... } }. Chodzi o to, że jeśli masz klasę w elemencie, jest to łatwe do zrobienia, .item { &.class { ... } }więc dlaczego nie miałbyś być w stanie zrobić tego samego z surowym elementem html. Tylko dlatego, że nie było sposobu, aby to zrobić w momencie opublikowania OP, nie oznacza, że nie miał racji, chcąc, aby ta funkcja faktycznie to robiła.
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
#{&}zasadzie oszukuje kompilator - czy to zawsze będzie działać w przyszłości !?
#{}jest oceniane. &Oznacza również aktualny selektor. Więc #{&}jest oceniany do .c1.
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)