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

Question

How could I, with SCSS, make the difference between :

#id.class {
  color: red;
}

and :

#id .class{
  color: blue
} 

Because I need something like :

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

Answer 1

You need & to reference to the parent of a selector.

Documentation

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

Answer 2

Use & :

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