What SCSS “&” Means?

Explains the mostly common used ampersand symbol in SCSS

Photo by TJ Arnold on Unsplash

In SCSS, the & is used to nest selectors. As one of the most extremely useful symbols, it can be a nice time-saver if you know how to use it. Otherwise, you might struggle to understand the SCSS structure especially when they are created by others.

First of all, we need to have a clear understanding of the difference of the following sets of classes.

Example1 (with a space between class1 and class2):

.class1 .class2 {
   ...
}

Example2 (without a space between class1 and class2):

.class1.class2 {
   ...
}

What .class1 .class2 Means (with a space)

The key difference between them is the space. A space in CSS has a special meaning. It means that the class2 selection which occurs at the right side of the space is a child of the class1 which is on the left side of the space.

It matches the following HTML structure:

<div class="class1">
   <div class="class2"></div>
</div>

What .class1.class2 Means (without a space)

This might be a little bit confusing. It means that it will select only the elements that have both the class1 and class2 classes…