Статьи

Основы Sass: Гнездование

Октябрь 18, 2018

Когда вы только начинаете использовать Sass, одной из первых функций, о которых вы услышите, является вложение. Одна из причин, по которой мы можем использовать препроцессор, состоит в том, чтобы уменьшить объем ввода, необходимый для создания правил CSS. Вложенность позволяет нам использовать ярлыки для создания наших правил. Проблема со всеми замечательными инструментами в том, что вероятность неправильного использования всегда есть. Вложенность ничем не отличается, поскольку чрезмерное использование может создавать сложные неуправляемые таблицы стилей.

Что такое вложение

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

div {
    p {
        color: black;
    }
}

Это вложение в самом простом. Элемент div Это в свою очередь компилируется в. 

 div p { color: black; }

Мы могли бы также дать div 

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

Это, в свою очередь, сводится к двум отдельным правилам: одно для самого divpdiv 

 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;
                    }
                }
            }
        }
    }

}

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

 .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 также предоставляет сокращение для написания стилей с использованием пространств имен CSS. Обычно при настройке свойств в том же пространстве имен, например border С помощью Sass мы можем написать пространство имен один раз и вложить его свойства. 

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

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

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

Как вы можете видеть, пространство имен добавляется к свойствам. В отличие от приведенного выше примера, нам не пришлось включать границу & для отображения в нужном месте.

Вывод

Теперь, когда вы знаете, что такое вложение, используйте его ответственно. Иногда, когда мы строим проект, мы можем упускать из виду масштаб того, что мы строим. Легко создать кошмар читабельности при вложении с помощью Sass. Когда и как использовать вложение, зависит только от вас, если вы решите пройти 8 уровней, во что бы то ни стало, сделайте это. Просто будьте готовы к долгим ночам работы, если проект подвергся капитальному ремонту.

39
Share: