SASS вложенные стили: пример с HTML и CSS

Рассмотрим вложенные стили в SASS. В качестве примера используем файл index.html с блоком, имеющим, содержащим список (<ul>) с пятью элементами списка (<li>). Каждый элемент списка содержит порядковый номер.

Подготовка HTML-файла

Файл index.html содержит следующий код:

<div id="CentralBlock">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

Вложенные стили в SASS

Создадим стили для блока CentralBlock в SASS-файле:

#CentralBlock {
  padding: 30px;
}

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

#CentralBlock ul {
  list-style: none;
  display: inline-block;
}

Этот код удаляет маркировку списка и выстраивает элементы списка в одну строку.

Использование вложенных стилей

Для достижения того же результата с помощью вложенных стилей, код можно переписать:

#CentralBlock {
  padding: 30px;
  ul {
    list-style: none;
    display: inline-block;
    li {
      margin-right: 10px;
    }
  }
}

Теперь стили для ul и li находятся внутри блока стилей для #CentralBlock. Это улучшает читаемость и организацию кода, группируя стили для связанных элементов. После компиляции SASS в CSS, вложенность преобразуется в селекторы, выбирающие все элементы ul и li внутри #CentralBlock.

Глубокая вложенность и альтернативные подходы

Чрезмерная вложенность снижает читаемость. При стилизации многих вложенных элементов лучше использовать более плоскую структуру. Например, вместо вложенности ul > li > a > span, можно использовать более конкретные селекторы.

Например, нужно задать стили для всех ссылок (<a>) внутри списка и отдельно для ссылок внутри элементов списка:

#CentralBlock {
  a {
    color: $color; /* Использование переменной цвета */
  }
  ul a {
    color: blue;
  }
}

Этот код устанавливает серый цвет для всех ссылок внутри #CentralBlock, и синий цвет – для ссылок внутри элементов списка. Таким образом, избегается излишняя вложенность, сохраняя структуру кода понятной и поддерживаемой.

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