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

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; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

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

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

компилируется в:

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }
Если суффикс не применим к родительскому селектору, Sass выдаст ошибку.


На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter. Также отправить оповещение об ошибке можно, нажав на эту ссылку.