SASS & Ampersand

The SASS & symbol is called the parent selector. It helps you reuse the parent selector in nested selectors. In this article, we will explain how to use the & symbol in SASS, both in simple and more advanced scenarios, with examples for each case.

Table of Contents

Basic Uses

The & symbol in SASS is used with different selectors, pseudo-classes and combinators inside nested selectors to create CSS styles that are more specific. Now, let’s go through each variation and understand how they work.

Parent Selector

As we mentioned before, the & symbol in SASS represents the parent selector in nested selectors. Let’s consider an example with a form element and its child elements. In this case, the & (ampersand) symbol is used to refer to the .form selector.

.form {
  background-color: red;

  & .input {
    font-size: 10px;
  }
  & .btn {
   background:blue;
  }
}

However, you don’t necessarily have to use the & symbol in these situations. This is because SASS’s nesting behavior already functions in the same way even without the & symbol. For instance:

.form {
  background-color: red;

 .input {
    font-size: 10px;
  }
 .btn {
   background:blue;
  }
}

These two pieces of SCSS code are transformed into the corresponding CSS code shown below.

.form { background-color: red; }

.form .input { font-size: 10px; }

.form .btn { background-color:blue; }

However

If you don’t include a space between the & (ampersand) and the selector, it indicates that you want to select elements that have both the “.class1” and “.class2” classes.

Let’s examine the following HTML code as an example:

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

To choose this particular HTML element that has both the “class1” and “class2” classes, you can make use of the SASS & symbol.

.class1 {
  &.class2 { // No space

  }
}

After compiling it to CSS, the resulting code would appear as follows:

.class1.class2 {} // no space

Pseudo-Classes

Pseudo-classes are denoted by the colon (:) symbol, which is followed by a state to modify the style of a selector based on certain conditions. In this case, the & (ampersand) symbol can be used to combine the selector with the desired state. Here’s an example:

.button {
  background-color: white;
  
  &:hover {
    background-color: red;
  }
  
  &:active {
    background-color: purple;
  }
}

In the given code, the ampersand symbol refers to the “.button” selector. After compiling it into CSS, the resulting code will look like:

.button {
  background-color: white;
}
.button:hover {
    background-color: red;
}
.button:active {
    background-color: purple;
}

Suffixes

As the & symbol represents the parent selector, we can add a suffix to the parent using it, similar to combining strings together.

.button {
  background-color: red;
  
  &__icon {

  }
  &--large {

  }
}

In this example, the parent selector and its suffix are combined together. When this code is converted to CSS, it will appear in the following manner:

.button {
  background-color: white;
}

.button__icon {
}

.button--large {
}

Adding Combinators

Combinators assist in selecting particular child and sibling elements of a parent selector. Once again, the & (ampersand) can be employed to represent the parent selector.

.parent {
  & > span {  }
  & + span {  }
}

However, in this case, you don’t necessarily need to use the ampersand character because SCSS’s default nesting behavior can handle combinators, as demonstrated in the example below:

.parent {
  > span {  }
  + span {  }
}

The two code snippets provided above are compiled into the following CSS code:

.parent > span { }
.parent + span { }

Complex Uses

In all the examples given, we only had one level of nested selectors and used only a single ampersand symbol. However, it is possible to use multiple ampersand symbols in multi-level nested selectors.

Multi-Level Nesting

When you have multiple parent selectors, the “&” ampersand symbol will refer all of them. For instance, in the following example, there is a three-level nesting.

.container {
  .card {
    .box {
      & > div {
        color: blue;
      }
    }
  }
}

After converting it to CSS code, each & character will be replaced by the “.container .card .box” selector, resulting in the following output:

.container .card .box > div {
  color: blue;
}

Multi-Level Selectors With Multiple & Symbol

To better understand the example mentioned above, consider the following example, where each “&” symbol will be replaced with the corresponding parent selector:

.container {
  .card {
    & > p + &-box {
      color: blue;
    }
  }
}

In this SCSS code, there is a two-level nesting and two “&” symbols. Each “&” symbol represents the selector “.container .card”. As a result, this code is compiled into the following CSS code:

.container .card > p + .container .card-box {
  color: blue;
}

As An Argument

You can also utilize the “&” symbol as an argument for pseudo-classes. For instance, the “:not()” pseudo-selector is employed to select elements that do not match a specific selector.

Here is an example of using “:not(&)” with the “&” symbol in SASS:

.button {
  &:not(&-disable) {
    cursor: pointer;
  }

  &-disable {
    opacity: 0.2;
    cursor: not-allowed;
  }
}

In this example, the “:not(&-disable)” selector is used to apply the “cursor: pointer;” rule to elements with the class “button” that do not have the additional “disabled” suffix. As a result, the output will appear as follows:

.button:not(.button-disable) {
  cursor: pointer;
}
.button-disable {
  opacity: 0.2;
  cursor: not-allowed;
}

Conclusion

The SASS & symbol is a powerful tool when working with nested selectors. It refers to the parent selector and can be used in combination with different selectors, pseudo-classes, and combinators. If you’re interested in learning more about SASS, you can explore the following articles:

Thank you for reading.