Вкладені правила

Подібно до вкладеності тегів в HTML, в SASS можна вкладати CSS-селектори. це одна з найбільш корисних можливостей, яка також часто неправильно використовується. Вкладеність дозволяє робити одні оголошення правил всередині інших. Нижче наведений CSS і SCSS код оформлення секції із заголовком і абзацом.

CSS

main.css

.section {
  width: 100%;
}

.section .title {
  color: red;
}

.section .text {
  font-size: 14px;
}

SCSS

main.scss

.section {
  width: 100%;

  .title {
    color: red;
  }

  .text {
    font-size: 14px;
  }
}

Синтаксис SCSS виглядає чистішим і менше повторюється. Після компіляції у стандартний CSS, ми отримаємо код як в main.css. Але в процесі розробки писати код буде зручніше.

Конкатенація селекторів

Символ & (амперсанд) дозволяє вказати, в яке місце необхідно підставити батьківський селектор. Запишемо імена класів з попереднього прикладу, використовуючи BEM-нотацію в CSS і SCSS.

CSS

main.css

.section {
  width: 100%;
}

.section__title {
  color: red;
}

.section__text {
  font-size: 14px;
}

SCSS

main.scss

.section {
  width: 100%;

  &__title {
    color: red;
  }

  &__text {
    font-size: 14px;
  }
}

Розглянемо ще один приклад - оформлення посилання зі станами ховеру і фокусу.

CSS

main.css

.link {
  color: black;
}

.link:hover {
  color: red;
}

.link:focus {
  color: red;
}

SCSS

main.scss

.link {
  color: black;

  &:hover {
    color: red;
  }

  &:focus {
    color: red;
  }
}

Що робити, якщо селектори для :hover і :focus в CSS згруповані? Без проблем групуємо в SASS, не забуваючи поставити амперсанд (&) там, де необхідно підставити батьківський селектор.

CSS

main.css

.link {
  color: black;
}

.link:hover,
.link:focus {
  color: red;
}

SCSS

main.scss

.link {
  color: black;

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

Правила вкладеності

Вкладеність селекторів - це чудовий спосіб заощадити час і спростити підтримку, але надмірна вкладеність гарантовано викличе проблеми з читабельністю коду.

Уявімо наступну розмітку кнопки з іконкою і текстом.

<button class="button" type="button">
  <svg class="icon"></svg>
  <span class="label">Замовити</span>
</button>

Запишемо якісь стилі в CSS і SCSS, і зробимо їх спеціально трохи складнішими, ніж потрібно.

CSS

main.css

.button {
  color: red;
}

.button:hover {
  color: blue;
}

.button__icon {
  width: 20px;
  height: 20px;
}

.button__icon:hover {
  width: 50px;
  height: 50px;
}

.button__label {
  font-size: 16px;
}

.button:hover .button__icon {
  background-color: teal;
}

.button:hover .button__label {
  font-size: 20px;
}

SCSS

main.scss

.button {
  color: red;

  &:hover {
    color: blue;

    .button__icon {
      background-color: teal;
    }

    .button__label {
      font-size: 20px;
    }
  }

  &__icon {
    width: 20px;
    height: 20px;

    &:hover {
      width: 50px;
      height: 50px;
    }
  }

  &__label {
    font-size: 16px;
  }
}

Прочитати такий SCSS-код швидко досить складно, візуально втрачається зв'язок з батьківським селектором і, замість того щоб розбирати CSS-код, доводиться вчитуватися у синтаксис вкладеностей. Тобто, використовуючи можливості препроцесора, ми зробили гірше, більше - не завжди краще.

Створюйте нове правило для кожного блоку або елемента, а вкладеності і конкатенації використовуйте для оформлення станів і BEM-модифікаторів. Тобто користуйтеся здоровим глуздом, і робіть так як зручно, тому що SCSS-код пишеться для зручності розробника.

CSS

main.css

.button {
  color: red;
}

.button:hover {
  color: blue;
}

.button__icon {
  width: 20px;
  height: 20px;
}

.button__icon:hover {
  width: 50px;
  height: 50px;
}

.button__label {
  font-size: 16px;
}

.button:hover .button__icon {
  background-color: teal;
}

.button:hover .button__label {
  font-size: 20px;
}

SCSS

main.scss

// Правило для всієї кнопки
.button {
  color: red;

  &:hover {
    color: blue;
  }
}

// Правило для іконки
.button__icon {
  width: 20px;
  height: 20px;

  &:hover {
    width: 50px;
    height: 50px;
  }

  .button:hover & {
    background-color: teal;
  }
}

// Правило для тексту
.button__label {
  font-size: 16px;

  .button:hover & {
    font-size: 20px;
  }
}