sass
гнездование

Основное гнездование

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

// SCSS
.parent {
  margin: 1rem;

  .child {
    float: left;
  }
}

// CSS output
.parent {
  margin: 1rem;
}

.parent .child {
  float: left;
}

Глубина вложенности

Вложение - очень мощная функция, но ее следует использовать с осторожностью. Это может произойти довольно легко и быстро, что вы начинаете гнездовать и продолжать, включая всех детей в гнезде, гнезда, гнезда. Позвольте мне продемонстрировать:

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// CSS output of the last rule
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

Проблемы

специфичность

li из приведенного выше примера имеет набор margin . Предположим, мы хотим переопределить это в медиа-запросе позже.

@media (max-width: 480) {

  // will not work
  .dropdown-list ul li {
    margin: 0;
  }

  // will work
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

Таким образом, в результате слишком глубокого гнездования вам придется снова и снова влагаться всякий раз, когда вы хотите переписать определенное значение. Хуже того, это часто бывает, когда правило !important

@media (max-width: 480) {

  // BIG NO-NO, don't do this
  .dropdown-list ul li {
    margin: 0 !important;
  }

Почему !important проблема - это плохая идея

Вы должны написать свой SCSS в хорошем виде, чтобы эти обходные пути вообще не нужны. Использование !important для такой незначительной проблемы уже приведет вас к кроличьей дыре!

Повторное использование

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

Вложенные слишком глубоко ваши стили связаны только с элементами, расположенными внутри самого внешнего родителя (элемента вверху вашего SCSS). Это позволяет копировать стили и вставлять их в другое место. Возможно, в другом вложенном правиле.

Ваши таблицы стилей станут все больше и больше, и их будет сложно поддерживать.

Как глубоко вы должны гнездиться?

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

Вложение с помощью @ at-root

Вложение, скорее всего, чаще всего используется для создания более конкретных селекторов, но его также можно использовать просто для организации кода. Используя директиву @at-root , вы можете «выпрыгнуть» из того места, где вы вложили его в свой Sass, вернув вас на верхний уровень. Это позволяет сохранять стили, сгруппированные, не создавая больше специфики, чем вам нужно.

Например, вы могли бы что-то вроде этого:

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

Это будет скомпилировано:

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

Делая это, все наши стили, связанные с классом .item находятся вместе в SCSS, но нам не обязательно нужен этот класс в каждом селекторе.

Исключение контекстов

По умолчанию объявления внутри @at-root будут отображаться в любом контексте. Это означает, что правила внутри блока @media например, будут оставаться там.

@media print {
  .item-wrapper {
    @at-root {
      .item {
        background: white;
      }
    }
  }
}

// Will compile to
@media print {
  .item {
    background: white;
  }
}

Это не всегда желаемое поведение, поэтому вы можете исключить контекст мультимедиа, передав media without опции директивы @at-root .

@at-root (without: media) {..

Для получения дополнительной информации см. Официальную документацию

Родительский селектор (&)

Вложение отлично подходит для совместного использования связанных селекторов, чтобы облегчить будущим разработчикам понимание вашего кода. Родительский селектор, представленный амперсандом («&»), может помочь сделать это в более сложных ситуациях. Существует несколько способов его использования.

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

// SCSS
.parent {

  &.skin {
    background: pink;
  }
}

// CSS output
.parent.skin {
  background: pink;
}

Представьте родителя после вложенного селектора в скомпилированном CSS, поместив родительский селектор после вложенного селектора.

// SCSS
.parent {

  .wrapper & {
    border: 1px solid black;
  }
}

// CSS output
.wrapper .parent {
  border: 1px solid black;
}

Состояния и псевдоэлементы

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

// SCSS
a {
  color: blue;

  &:active,
  &:focus {
    color: red;
  }

  &:visited {
    color: purple;
  }
}

// CSS output
a {
  color: blue;
}

a:active,
a:focus {
  color: red;
}

a:visited {
  color: purple;
}

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

// SCSS
.parent {

  &::after {
    display: table;
    clear: both;
    content: '';
  }

  &::only-child {
    font-weight: bold;
  }
}

// CSS output
.parent::after {
  display: table;
  clear: both;
  content: '';
}

.parent::only-child {
  font-weight: bold;
}

Свойства гнездования

Некоторые свойства CSS принадлежат пространству имен, например border-right принадлежит пространству имен border . Чтобы писать меньше, мы можем использовать вложение свойств и пропускать эти префиксы даже на нескольких уровнях.

Если нам нужно было создать границу справа и слева от класса с именем .borders мы могли бы написать это:

 //SCSS
 .borders {
    border: 2px dashed blue;
    border: {
        left: 1px solid black;
        right: 1px solid red;
    }
  }

 // CSS output 
 .borders {
    border: 2px dashed blue;  
    border-left: 1px solid black;
    border-right: 1px solid red;
  }
 

Это избавляет нас от необходимости писать border-right и border-left , однако мы все еще пишем повторяющийся код с линиями 1px solid black и 1px solid red . Мы можем написать еще менее повторяющийся CSS с последующим:

// SCSS
.borders {
  border: 2px dashed blue {
    left: 1px solid black;
    right: {
      color: red;
    }
  }
}

// CSS output
.borders {
   border: 2px dashed blue;
   border-left: 1px solid black;
   border-right-color: red;
}