Комбинаторы во вложенности

В этой статье рассказывается о комбинаторах во вложенности.

Мы объясним, как использовать комбинаторы во вложенности с помощью SASS и предоставим пример кода для пошагового понимания.

YouTube Video

Комбинаторы во вложенности

В SASS вы можете лаконично писать CSS-селекторы на основе отношений родитель–потомок, но для правильного использования комбинаторов, таких как селекторы потомков и соседей, требуется особое внимание.

Основы вложенности

В SASS, вложив дочерние селекторы в родительские, вы можете чётко и лаконично выразить отношения родитель–потомок в CSS.

Пример: Простая вложенность

1.nav {
2    ul {
3        li {
4            color: blue;
5        }
6    }
7}

Скомпилированный CSS

1.nav ul li {
2    color: blue;
3}

Ссылка на родительский селектор (&)

В SASS символ & используется для ссылки на текущий родительский селектор.

Сочетание комбинаторов и &

Используя &, можно создавать гибкие селекторы.

Пример

1.card {
2    & > .title {
3        font-weight: bold;
4    }
5    & + .card {
6        margin-top: 20px;
7    }
8}

Скомпилированный CSS

1.card > .title {
2    font-weight: bold;
3}
4.card + .card {
5    margin-top: 20px;
6}

Сокращённое обозначение для &

В SASS, когда комбинатор помещается в начало селектора, родительский селектор автоматически подставляется, поэтому & можно опустить.

Случаи, когда опускание возможно

Например, когда вы пишете + .item, SASS внутренне интерпретирует это как & + .item и автоматически создаёт комбинацию с родительским селектором.

Пример

1.item {
2    + .item {
3        margin-top: 10px;
4    }
5    &--hover {
6        background-color: red;
7    }
8}

Скомпилированный CSS

1.item + .item {
2  margin-top: 10px;
3}
4.item--hover {
5  background-color: red;
6}

Обзор комбинаторов

CSS-комбинаторы определяют отношения между селекторами. Ниже приведены основные типы комбинаторов.

1. Селектор потомка (пробел) Селектор потомка выбирает все элементы-потомки внутри родительского элемента. Пример: .parent .child

2. Селектор непосредственного потомка (> ) Селектор непосредственного потомка выбирает только прямых потомков. Пример: .parent > .child

3. Селектор смежного соседа (+) Селектор смежного соседа выбирает элемент, следующий непосредственно за другим элементом на одном уровне. Пример: .sibling1 + .sibling2

4. Селектор всех братьев (~) Селектор всех братьев выбирает все следующие элементы-братья на одном уровне. Пример: .sibling1 ~ .sibling2

Как использовать комбинаторы в SASS

Селектор потомка (пробел)

Во вложенности SASS селектор потомка через пробел применяется по умолчанию.

Пример

1.container {
2    .header {
3        .title {
4            font-size: 20px;
5        }
6    }
7}

Скомпилированный CSS

1.container .header .title {
2    font-size: 20px;
3}

Селектор непосредственного потомка (> )

Если вы хотите использовать селектор непосредственного потомка, явно укажите > в коде SASS.

Пример

1.container {
2    & > .header {
3        & > .title {
4            font-size: 20px;
5        }
6    }
7}

Скомпилированный CSS

1.container > .header > .title {
2    font-size: 20px;
3}

Селектор смежного соседа (+)

Чтобы стилизовать ближайший соседний элемент, используйте +.

Пример

1.item {
2    & + .item {
3        margin-top: 10px;
4    }
5}

Скомпилированный CSS

1.item + .item {
2    margin-top: 10px;
3}

Селектор всех братьев (~)

Чтобы стилизовать всех следующих братьев на одном уровне, используйте ~.

Пример

1.alert {
2    & ~ .alert {
3        border-top: 1px solid red;
4    }
5}

Скомпилированный CSS

1.alert ~ .alert {
2    border-top: 1px solid red;
3}

Псевдоклассы и псевдоэлементы во вложенности

Псевдоклассы и псевдоэлементы также легко пишутся в SASS.

Пример

1.button {
2    &:hover {
3        background-color: blue;
4    }
5    &::after {
6        content: '';
7        display: block;
8    }
9}

Скомпилированный CSS

1.button:hover {
2    background-color: blue;
3}
4.button::after {
5    content: '';
6    display: block;
7}

Практический пример

Ниже приведён пример сложного стиля, сочетающего несколько комбинаторов.

Код 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}

Скомпилированный 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}

Резюме

Если вы правильно понимаете вложенность и комбинаторы в SASS, вы сможете писать более лаконичный и читаемый CSS.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video