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 } } } }
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.