Попытка создать класс css в angular, но вложенная ошибка .getting (для использования '}' до того, как я напишу другой класс внутри основного))

Question

CSS

.style-class-a {    
  background-position:fixed;    
  .style-class-b{  
  background-color:xyz   
 }   
}

Теперь, похоже, это работает на других моих проектах, но когда я недавно начал новый, я что-то упустил.

Answer 1

Если вы хотите применить два класса к одному элементу, попробуйте следующую структуру.

.style-class-a { 
  background-position:fixed;
  background-color:black; 
}
.style-class-a.style-class-b {
  background-color:green; 
}

<div class="style-class-a" style="height: 50px; width: 50px"></div>
<br>
<div class="style-class-a style-class-b" style="height: 50px; width: 50px"></div>

Если вы используете S CSS, то при генерации проекта вам необходимо явно указать: ng new sample-app --style=scss. Если нет, Angular будет использовать CSS по умолчанию, а CSS не разрешает вложенные селекторы. Следующие опции принимаются

• ng new sample-app --style=scss
• ng new sample-app --style=sass
• ng new sample-app --style=less

Answer 2

Насколько я знаю CSS не поддерживает вложенные классы. Возможно, ваша проблема в том, что CLI создает файлы стиля CSS, а вам нужны файлы S CSS. Если это так, вам нужно изменить расширения файлов и установить CLI для создания файлов S CSS.

Answer 3

CSS не поддерживает вложенный класс, для этого нужно использовать SASS или LESS.