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

css, css-selectors, sass

Solution

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

Documentation

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

Problem

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; } } ```

Original source