Наступна потужна функція — це вкладеність. Вона дозволяє вкладати один селектор в інший для створення більш організованого та читабельного коду. Ми можемо групувати стилі та зменшувати обсяг коду, який потрібно писати.

Уявімо, що нам потрібно створити навігацію для вебсайту.

HTML для цієї навігації виглядатиме наступним чином:

<nav>
  <ul>
    <li>
      <a href="#home">Home</a>
    </li>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#price">Price</a>
    </li>
  </ul>
</nav>

Враховуючи, що окрім навігації, ми використовуємо ті ж самі HTML-теги (ul, li, a) багаторазово у всьому проєкті. Щоб додати стилі саме до цих елементів, необхідно використовувати вкладені правила у CSS. CSS може виглядати так:

nav {
  background-color: rebeccapurple;
  border-radius: 10px;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding-left: 0;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: aquamarine;
}

nav ul li a:hover {
  text-decoration: underline wavy;
}

Тепер розглянемо, як sass може спростити роботу. Усі ці стилі можна згрупувати в одному блоці. Код переписується так:

nav {
  background-color: rebeccapurple;
  border-radius: 10px;
  padding: 10px;

  ul {
    list-style: none;
    padding-left: 0;

    li {
      display: inline-block;
      margin: 0 10px;

      a {
        text-decoration: none;
        color: aquamarine;
        
        &:hover {
          text-decoration: underline wavy;
        }
      }
    }
  }
}

Це схоже на вкладення блоку стилів дочірнього елемента у блок батьківського елемента. Зверніть увагу, що символ & у селекторі &:hover використовується для посилання на батьківський селектор, у цьому випадку — a. Це скорочений спосіб запису a:hover, який дозволяє зручно створювати вкладені селектори без багаторазового повторення батьківського селектора.