Kombinatory w zagnieżdżaniu
Ten artykuł wyjaśnia temat kombinatorów w zagnieżdżaniu.
Wyjaśnimy, jak stosować kombinatory w zagnieżdżaniu za pomocą SASS i przedstawimy przykładowy kod, aby pomóc Ci zrozumieć to krok po kroku.
YouTube Video
Kombinatory w zagnieżdżaniu
W SASS można zwięźle zapisywać selektory CSS na podstawie relacji rodzic-dziecko, ale należy zwrócić szczególną uwagę na poprawne użycie kombinatorów takich jak potomkowy czy sąsiedni.
Podstawy zagnieżdżania
W SASS, poprzez zagnieżdżanie selektorów potomnych wewnątrz selektorów rodzica, można jasno i zwięźle przedstawić relacje rodzic-dziecko w CSS.
Przykład: Podstawowe zagnieżdżanie
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}Skompilowany CSS
1.nav ul li {
2 color: blue;
3}Odniesienie do selektora rodzica (&)
W SASS znak & służy do odniesienia się do bieżącego selektora rodzica.
Łączenie kombinatorów i &
Dzięki & możesz budować elastyczne selektory.
Przykład
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}Skompilowany CSS
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}Skrócony zapis dla &
W SASS, gdy łącznik znajduje się na początku selektora, selektor nadrzędny jest wstawiany domyślnie, więc można pominąć znak &.
Przypadki, w których pominięcie jest możliwe
Na przykład, gdy napiszesz + .item, SASS wewnętrznie interpretuje to jako & + .item i automatycznie generuje połączenie z selektorem nadrzędnym.
Przykład
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}Skompilowany CSS
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}Przegląd kombinatorów
Kombinatory CSS definiują relacje między selektorami. Oto główne typy kombinatorów.
-
Selektor potomny (spacja) Selektor potomny wskazuje na wszystkie elementy potomne zawarte w elemencie nadrzędnym. Przykład:
.parent .child -
Selektor dziecka (
>) Selektor dziecka wskazuje tylko bezpośrednie elementy potomne. Przykład:.parent > .child -
Selektor sąsiedni (
+) Selektor sąsiedni wskazuje na bezpośrednio następujący obok element rodzeństwa. Przykład:.sibling1 + .sibling2 -
Ogólny selektor rodzeństwa (
~) Ogólny selektor rodzeństwa wskazuje na wszystkie następujące elementy rodzeństwa. Przykład:.sibling1 ~ .sibling2
Jak używać kombinatorów w SASS
Selektor potomny (spacja)
W zagnieżdżaniu SASS selektor potomny (spacja) stosowany jest domyślnie.
Przykład
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}Skompilowany CSS
1.container .header .title {
2 font-size: 20px;
3}Selektor dziecka (> )
Jeśli chcesz użyć selektora dziecka, napisz wyraźnie > w swoim kodzie SASS.
Przykład
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}Skompilowany CSS
1.container > .header > .title {
2 font-size: 20px;
3}Selektor sąsiedni (+)
Aby ostylować bezpośrednio następujący element rodzeństwa, użyj +.
Przykład
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}Skompilowany CSS
1.item + .item {
2 margin-top: 10px;
3}Ogólny selektor rodzeństwa (~)
Aby ostylować wszystkie kolejne rodzeństwa na tym samym poziomie, użyj ~.
Przykład
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}Skompilowany CSS
1.alert ~ .alert {
2 border-top: 1px solid red;
3}Pseudo-klasy i pseudo-elementy w zagnieżdżaniu
Pseudo-klasy i pseudo-elementy można także łatwo stosować w SASS.
Przykład
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}Skompilowany CSS
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}Praktyczny przykład
Poniżej znajduje się przykład złożonego stylu łączącego wiele kombinatorów.
Kod SASS
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}Skompilowany CSS
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}Podsumowanie
Jeśli poprawnie rozumiesz zagnieżdżanie i kombinatory w SASS, możesz pisać bardziej zwięzły i czytelny CSS.
Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.