Как правильно изменить синтаксис CSS на SCSS с использованием вложенности?

Как исправить ошибку "& may only used at the beginning of a compound selector" в коде SCSS?

Перефразировка: Как исправить ошибку "&", которая может быть использована только в начале составного селектора, в следующем коде SCSS?
  • 15 ноября 2023 г. 5:38
Ответы на вопрос 2
Для изменения синтаксиса CSS на SCSS с использованием вложенности, вам нужно поместить правила стилей внутрь родительского селектора, используя фигурные скобки. Вот пример:

CSS:
```
.header {
  background-color: blue;
}

.header h1 {
  color: white;
}
```

SCSS:
```
.header {
  background-color: blue;

  h1 {
    color: white;
  }
}
```

Что касается ошибки "& may only used at the beginning of a compound selector", она возникает, когда вы используете амперсанд (&) внутри вложенного селектора. Амперсанд используется для обращения к родительскому селектору. Чтобы исправить эту ошибку, вам нужно переместить амперсанд в начало составного селектора. Вот пример:

Неправильно:
```
.header {
  background-color: blue;

  & h1 {
    color: white;
  }
}
```

Правильно:
```
.header {
  background-color: blue;

  h1& {
    color: white;
  }
}
```

Теперь амперсанд находится в начале составного селектора и ошибка исчезнет.
".
1. Вместо кода ".project-details__container.project-details__container__loaded {}" можно использовать ".project-details{}". Добавьте переменную "$this" и установите ее равной текущему селектору "&". Затем добавьте селектор "&__container" и используйте переменную "$this" внутри селектора для создания класса ".project-details__container__loaded".
2. Вместо кода ".project-details__cover.project-details__cover_loaded {}" можно использовать ".project-details{}". Добавьте селектор "&__cover" и используйте переменную "$this" внутри селектора для создания класса ".project-details__cover_loaded".
3. Однако, стоит отметить, что код со специфичностью может быть неправильным. Нормальный вариант может выглядеть следующим образом: ".project-details{}", а затем ".project-details__container{}" с классом ".project-details__loaded".
Похожие вопросы