SCSS & (Ampersand): Here is Everything You Should Know

& (Ampersand) is powerful symbol in SCSS/SASS that is used in nested styling to refer the parent selector. If you want take the SCSS nesting feature a step further, then here is everything you should know about & in SCSS.

What is & in SCSS

The SCSS “&” (ampersand) symbol is a special selector known as the parent selector. It is used to refer to the outer selector in nested styling, enabling you to prevent repetition when creating styles, especially when dealing with pseudo-classes, pseudo-elements, and combinators.

Here is how it works:

Basic Example

Now, let’s take a look at the following basic example where there is a block of styles for a form element and its child elements within it. In this example the & symbol represents the .form selector.

.form {
  background-color: white;

  & .input {
    font-size: 20px;
  }
  & .btn {
   background:red;
  }
}

When it is converted into CSS, it would like this:

.form { background-color: white; }

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

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

Although the & (ampersand) symbol does its job and refer to the .form selector. Actually, you don’t have to use the & symbol like in these cases. Because SCSS’s nesting behavior already works the same way without the & symbol.

For example,

.form {
  background-color: white;

  .input {
    font-size: 20px;
  }
  .btn {
    background-color:red;
  }
}

This SCSS snippet also is compiled into the same CSS code above.

However

If there is no space between the & (ampersand) and the other selector, this means different.

Consider the following HTML code where a HTML div tag have two classes

<div class="class1 class2">Hello, World!</div>

If you want to select elements that have both .class1 and .class2 classes, you need to utilize the SCSS & symbol as shown below:

.class1 {
  &.class2 { // there is no space

  }
}

When it is compiled to CSS, it would look like:

.class1.class2 {} // without space

Using With Pseudo-Classes

Pseudo-Classes are indicated with the : symbol, followed by a state to change the style of a selector based on some conditions. At this point, SCSS & (Ampersand) symbol can be used to concatenate the selector with the desired state.

For example, in the following code snippet, the ampersand refer to the .button selector.

.button {
  background-color: blue;
  
  &:hover {
    background-color: lightblue;
  }
  
  &:active {
    background-color: darkblue;
  }
}

Thus, once it is compiled to CSS, the resulting code will look like:

.button {
  background-color: blue;
}
.button:hover {
    background-color: lightblue;
}
.button:active {
    background-color: darkblue;
}

Adding Suffixes

Suffixes are mostly added to the parent selector to build a methodology for naming CSS. Since the SCSS & symbol refers to the parent, a suffix can be attached to a parent selector, similar to string concatenation.

.button {
  background-color: blue;
  
  &__icon {
    /* Styles for the button icon */
  }
  
  &--large {
    /* Styles for a large-sized button */
  }
}

In this example, the parent selector and its suffix are actually concatenated. After converting it to CSS, it will look like this:

.button {
  background-color: blue;
}

.button__icon {
  /* Styles for the button icon */
}

.button--large {
  /* Styles for a large-sized button */
}

Using With Combinators (>, +, ~)

Combinators help selecting specific child and siblings elements of a parent selector. Again, the & (ampersand) can be used to refer to the parent selector.

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

Actually, you also don’t have to use the ampersand character here because the SCSS normal nesting behavior can handle combinators as shown in below:

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

These two code snippets above compile to the following CSS:

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

Multi Level Nesting

If you have multiple nested selectors , the & ampersand symbol will refer to all of them. For example, in the following example, there are three-level nesting.

.container {
  .card {
    .box {
      & > p {
        color: red;
      }
    }
  }
}

Once it is converted to CSS code, the & character will replaced by .container .card .box selector thus the result will be like:

.container .card .box > p {
  color: red;
}

Multi-Level Nesting With Multiple & Symbol

When you use multiple ampersand character in multi-level nesting, you can understand better how SCSS & works.

Consider the following example,

.container {
  .card {
    & > div + &-box {
      color: red;
    }
  }
}

In this SCSS code, there are two-level nesting and two & symbols. Each & symbol represent the selector .container .card, therefore this code compiles to the following CSS code:

.container .card > div + .container .card-box {
  color: red;
}

That is, & symbol replaced with the outer selector .container .card.

SCSS & Symbol As An Argument

You can also use the symbol as an argument for pseudo-classes. For example, the :not() pseudo-selector is used to select elements that do not match a particular selector.

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

  &-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

In this example, the &:not(&-disabled) selector applies the cursor: pointer; rule to elements with the class “button” that do not have the additional suffix “disabled”. Thus, the result will be like:

.button:not(.button-disabled) {
  cursor: pointer;
}
.button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

FAQ

Here are some frequently asked questions (FAQs) and information about the SCSS “&” (ampersand) symbol:

Can & be used outside of nested selectors?

No, & is specifically used within nested selectors to refer to the parent selector. It doesn’t have a meaning outside of this context.

Is & unique to SCSS/Sass, or is it used in regular CSS?

& is unique to SCSS/Sass and is not used in regular CSS. It’s a feature of SCSS that makes it more powerful and flexible for generating CSS styles.

Can & be used with media queries and other at-rules?

Yes, SCSS & symbol can be used with media queries and other at-rules to create more specific and nested rules.

Conclusion

SCSS & (ampersand) symbol is a powerful selector in a nested selector. It is refer to the parent selector and used with combination of various selector, pseudo-classes and combinators.

In this article we have discussed its basic and complex usage with example, If you want to learn more about SCSS, you can check the following articles:

Thank you for reading.