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 {       & > ul {         & > li {           color: blue;         }       }      }      //Case 3      .parent {       & > ul {         & > li {           color: blue;           &:hover {             color: pink           }         }       }     }  

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.