Основы Sass: Вложенность
HTML&CSS

Основы Sass: Вложенность

Оригинал: Sass Basics: Nesting, Reggie Dawson

Когда вы только начинаете использовать Sass, первое, с чем вы сталкиваетесь — это вложенность (nesting). Одна из причин, по которой мы используем препроцессоры, заключается в том, что они помогают сократить количество кода. В частности, вложенность позволяет использовать сокращения при написании правил. Однако проблема всех отличных инструментов в том, что ими легко злоупотребить. Излишнее использование вложенности приводит к сложным, не поддающимся сопровождению стилям.

Что такое вложенность

Вложенность позволяет записывать селекторы, имитирующие структуру HTML. Это дает возможность использовать сокращения при написании стилей. Например:


div {
    p {
        color: black;
    }
}

Это простейший пример вложенности, элемент div содержит элемент p. Скомпилированный результат:


div p { color: black; }

Элементу div мы можем задать собственные свойства:


div {
    font-size: 14px;
    p {
        color: black;
    }
}

Этот пример скомпилируется в два разных правила, одно для элемента div, другое — для p.


div { font-size: 14px;}
div p { color: black; }

Как использовать вложенность

Использовать вложенные стили достаточно просто: нужно всего лишь записать селектор (или селекторы) между фигурными скобками другого селектора.


.parent {
    .child {
    }
}

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


.first-level {
    .second-level {
        .third-level {
            .fourth-level {
            }
        }
    }
}

Ограничения на уровень вложенности действительно нет. Но если что-то можно сделать, это не значит, что это нужно делать. Хорошей практикой считается сохранение не более трех уровней вложенности. Большее число уровней влияет на читаемость кода. Sass призван помочь нам писать CSS быстрее, а не превратить его в кучу неподдерживаемых стилей. Например:


.page {
    font-family: sans-serif;
    .content {
        background-color: black;
        .text {
            color: white;
            font-size: 12px;
            .headline {
                font-weight: bold;
                a {
                    color: blue;
                    &:visited {
                        color: green;
                    }
                    &:hover {
                        color: red;
                    }
                    &:active {
                        color: yellow;
                    }
                }
            }
        }
    }

}

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


.page { font-family: sans-serif; }

.page .content { background-color: black; }

.page .content .text { color: white; font-size: 12px; }

.page .content .text .headline { font-weight: bold; }

.page .content .text .headline a { color: blue; }

.page .content .text .headline a:visited { color: green; }

.page .content .text .headline a:hover { color: red; }

.page .content .text .headline a:active { color: yellow; }

Представьте, что мы изменим структуру страницы, например, поменяем .content на .article. Все вложенные стили должны быть переписаны, поскольку все они зависят от .content.

Если мы захотим использовать стили для .text где-нибудь еще на сайте, мы не сможем, потому что правила для .text зависят от элементов, которые его окружают.

Ссылки на родитеский селектор

В страшном примере выше мы использовали &, который должен замещаться на родительский селектор. Символ : использовался для создания псевдо-классов для ссылок.


a {
    color: blue;
    &:visited {
    color: green;
    }
    &:hover {
    color: red;
    }
    &:active {
    color: yellow;
    }
}

Скомпилируется в:


a { color: blue; }

a:visited { color: green; }

a:hover { color: red; }

a:active { color: yellow; }

Само по себе это легко читается и вполне поддерживаемо. Символ & также можно использовать для создания сложных селекторов, добавив в нему окончания. Например:


.col {
    &-span1 { width: 8.33%; }
    &-span2 { width: 16.66%; }
    &-span3 { width: 24.99%; }
}

Получим:


.col-span1 { width: 8.33%; }
.col-span2 { width: 16.66%; }
.col-span3 { width: 24.99%; }

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

Sass также позволяет использовать сокращения для свойств. Обычно для определения свойств из одного пространства имен, например border, мы должны каждое свойство записывать отдельно. В Sass мы можем задать пространство имен, а внутри перечислить свойства.


.example {
    border: {
        style: dashed;
        width: 30px;
        color: blue;
    }
}

Скомпилируется в:


.example {
    border-style: dashed;
    border-width: 30px;
    border-color: blue;
}

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

Заключение

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться