How to distinguish "# id.class" from "# id.class" in SCSS?

Question

How could I make a difference between SCSS:

#id.class { color: red; } 

and:

 #id .class{ color: blue } 

Because I need something like:

 #id { .class { color: red; } ' ' + .class { color: blue; } } 

Answer 1

You will need & to reference the parent element of the selector.

Documentation

 #id { .class { color: red; } &.class { color: blue; } } 

Answer 2

Use & :

 #id { .class { color: red; } &.class { color: blue; } }