S CSS - Добавление & между классом и {

Question

Я понимаю это:

.items {
    @media $desktop {
      color: red;
    }
  }

Но что это значит? Может кто-нибудь объяснить, что означает & после .items - open ?

.items--open & {
   @media $desktop {
     color: red;
   }

Answer 1

Я думаю эта статья может объяснить вам все, что вам нужно знать о & SASS. Но простое объяснение (взять из статьи):

Мы можем думать о & как о механизме, который позволяет нам размещать родительский селектор везде, где он нам нужен, в нашем дочернем селекторе. Это позволяет нам гнездиться с изменениями. Давайте рассмотрим еще несколько примеров.

В основном это утилита, которая позволяет лучше контролировать размещение родительских селекторов в классах S CSS.

Answer 2

Правильный синтаксис / использование амперсанда (&) заключается в размещении родительского селектора с потомком
Например (если вам нужно ниже css)

.items--open.some-class{
 color: red;
}

.items--open.some-2-class{
 color: white;
}
..so on so forth

Вы должны использовать приведенный ниже код

.items--open {
 &.some-class{
     color: red;
 }
 &.some-2-class{
     color: white;
 }
}

В вашем коде множество ошибок.

Неправильно

.items {
 @media $desktop {
  color: red;
 }
}
.items--open & {
   @media $desktop {
     color: red;
   }

Справа

.items {
    @media #{$desktop} { //wrap variable in ${}
        color: red;
    }
}

.items--open {
    &.item { //You can't use @media with (&) here, it should be selector
        color: red;
    }
}

.item--open {
    &@media (min-width: 1200px) { // you can't do this
        color: red;
    }
}

.item--open {
    @media (min-width: 1200px) { // you can do this
        color: red;
    }
}