What does the & mean in an scss selector?

Question

What does & refer to in an scss selector?

    //Case 1

    .parent {
      & > ul {
        color: red
      }
    }

    //Case 2

    .parent {
          


        

Answer 1

The & is a placeholder for the parent selector:

.parent {
  & > ul {
    color: red
  }
}

Is the same like

.parent > ul {
  color: red
}

A common use case are pseudo classes, e.g.:

.link {
  &:hover {
    color: red
  }
}

A nice explanation with examples can be found on CSS Tricks.