Ссылка на родителя селектора

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

a {
  font-weight: bold;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  body.firefox & {
    font-weight: normal;
  }
}

a
  font-weight: bold
  text-decoration: none

  &:hover
    text-decoration: underline

  body.firefox &
    font-weight: normal

a {
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

body.firefox a {
  font-weight: normal;
}

Символ & будет заменен на родительский селектор, каким он компилируется в CSS. Это означает, что если у вас есть глубоко вложенное правило, родительский селектор будет полностью вычислен до символа & и подставится вместо него. Например:

#main {
  color: black;

  a {
    font-weight: bold;

    &:hover {
      color: red;
    }
  }
}

#main
  color: black

  a
    font-weight: bold

    &:hover
      color: red

#main {
  color: black;
}

#main a {
  font-weight: bold;
}

#main a:hover {
  color: red;
}

Символ & должен быть указан в начале составного селектора, также он может содержать последующий суффикс, который будет добавлен к родительскому селектору. Например:

#main {
  color: black;

  &-sidebar {
    border: 1px solid; 
  }
}

#main
  color: black

  &-sidebar
    border: 1px solid

#main {
  color: black;
}

#main-sidebar {
  border: 1px solid;
}

Если суффикс не применим к родительскому селектору, Sass выдаст ошибку.