Question

Предположим, у меня есть этот HTML-код:

<body class="boxed">
  <div class="text-white">
    <a href="#" class="btn-featured">Button</a>
  </div>
</dody>

Я использую этот код sass следующим образом:

.boxed {
  // error with using "Ampersand"
  body& {

  }
}

Но это приводит к ошибке компиляции, которая говорит:

Хотя я хочу получить следующий результат:

// This the result i want
body.boxed {

}

Я знаю, что могу использовать это так, и это приведет к тому, что я ищу:

// I know i can use this
body {
  &.boxed {

  }
}

Но я хочу отделить код класса .boxed от кода тела body для организации.

Так почему же это не разрешено, хотя аналогичный код для элемента и его родителя работает для следующего:

// Although this similar code for element and 
// it's parent is working
.btn-featured {
  .text-white & {
    font-size: 30px;
  }
}

На самом деле я надеюсь узнать, почему это не разрешено!

patelarpan · Answer 1 · 01 мая 2018

Здравствуйте, Морад, вам нужно использовать @at-root

.boxed {
  @at-root body#{&} {
     color: red;
  }
}

Miguel A. Friginal · Answer 2 · 01 мая 2018

Вам нужно поменять местами селекторы, чтобы они работали так, как вы сказали.

body {
  &.boxed {
    background: red;
  }
}

Проблема в том, что амперсанд соединяет предыдущий селектор с текущим селектором. Поэтому, когда вы делаете что-то вроде этого:

.boxed {
  body & {
    background: red;
  }
}

Он пытается добавить 'ничто' к тегу body внутри элемента с классом boxed. Лучший способ сделать это так, как вы уже заявили.

Sass: использование амперсанда '&' для тега body, имеющего определенный класс

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