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.

1. Selektor potomny (spacja) Selektor potomny wskazuje na wszystkie elementy potomne zawarte w elemencie nadrzędnym. Przykład: .parent .child

2. Selektor dziecka (> ) Selektor dziecka wskazuje tylko bezpośrednie elementy potomne. Przykład: .parent > .child

3. Selektor sąsiedni (+) Selektor sąsiedni wskazuje na bezpośrednio następujący obok element rodzeństwa. Przykład: .sibling1 + .sibling2

4. 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.

YouTube Video