CODEWITHSUNDEEP
cssangular
akshay rawat
akshay rawat

Reputation: 15

Trying to create a css class in angular but nested .getting error ( for using '}' before i write another class inside the main one))

CSS

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

Now, this seemed to be working on my other projects but when I started on a new one recently I am missing out something.

Upvotes: 0

Views: 1504

Answers (4)

JalilIrfan
JalilIrfan

Reputation: 158

Just FYI, CSS natively now supports nesting Refer here

Upvotes: 0

Barremian
Barremian

Reputation: 31105

If you want to apply two classes on a same element try the following structure.

.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>

In you are using SCSS, then you need to explicitly mention when generating the project: ng new sample-app --style=scss. If not Angular will use CSS by default and CSS does not allow nested selectors. The following options are accepted

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

Upvotes: 1

fercaveri
fercaveri

Reputation: 63

CSS doesn't support nested class, you want to use SASS or LESS to achieve that.

Upvotes: 0

cabesuon
cabesuon

Reputation: 5270

As far as I know CSS does not support nested classes. Maybe your problem is the CLI is creating CSS style files and you want SCSS files. If that is the case you need to change file extensions, and you should set the CLI for creating SCSS files.

Upvotes: 1

Related Questions