Вложенность в SASS

В этой статье объясняется, что такое вложенность в SASS.

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

YouTube Video

Вложенность в SASS

SASS — это расширенный язык таблиц стилей для CSS, который предлагает множество функций для эффективного оформления. Среди них особенно полезной возможностью является вложенность, которая позволяет наглядно представить иерархическую структуру CSS.

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

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

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

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

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}

• В этом коде используется возможность вложенности в SASS для краткого и иерархического описания стилей навигационного меню. Благодаря вложенности, отношения родитель-потомок становятся визуально понятными, а читаемость улучшается.

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

Когда вам нужно сослаться на родительский селектор во вложенных стилях, используйте &. Это позволяет создавать селекторы с определёнными состояниями или модификаторами.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}

• В этом коде используется & в SCSS для определения состояний :hover и :active для родительского селектора .button.

Сгенерированный CSS

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

Вложенность медиазапросов

В SASS вы также можете вкладывать медиазапросы. Это позволяет реализовать адаптивный дизайн, сохраняя актуальность ваших стилей.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}

• В этом коде медиазапрос вложен внутри класса .container, что позволяет реализовать адаптивный дизайн с изменяющейся шириной в зависимости от размера экрана.

Сгенерированный CSS

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

Важные моменты вложенности

Слишком глубокая вложенность может сделать ваш код многослойным и затруднить его поддержку. Не рекомендуется использовать глубокую вложенность, как в примере ниже.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

Такой код имеет слишком глубокую вложенность, поэтому его можно рефакторить следующим образом.

1.header .nav ul li a {
2    color: red;
3}

Практический пример: навигационная панель

Ниже приведён пример оформления навигационной панели с помощью вложенности в SASS.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}

• Этот код организует и определяет стили для списков и ссылок внутри навигационной панели, включая эффекты наведения, с помощью вложенности в SASS.

Сгенерированный CSS

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

Резюме

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

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

YouTube Video