YogeshChauhan . com

Ampersand (Parent Selector) in SCSS (Sass)

in SCSS on April 26, 2021

The parent selector is nothing but an ampersand symbol (&).

The parent selector (&) is used to refer to the outer selector when you nest selectors.

I love it! It makes it so much easier to reuse the outer selector and helps to create more complex styles by following a simple syntax.

For e.g. take a look at this SCSS:


.alert {
  &:hover {
    font-weight: bold;
  }
  &.second-class{
    font-size: 20px;
  }
}

Here’s the compiled CSS:


.alert:hover {
  font-weight: bold;
}
.alert.second-class {
  font-size: 20px;
}

Those are just two different elements/selectors style but can you imagine doing that for tons of nested elements?!

You can refer to the outer selector after as well. Like this:


.alert {
  :not(&) {
    opacity: 0.8;
  }
}

Here’s the compiled CSS:


:not(.alert) {
  opacity: 0.8;
}

If you don’t leave a space or add a bracket, you might experience weird behavior.

Here’s the GitHub issue page related to that.

Add Suffixes

Use the parent selector, you can add additional suffixes to the outer selector, as long as the outer selector ends with an alphanumeric name.

Like this:


.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;

  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;
    color: gray;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;

    &--open {
      display: block;
    }
  }
}

Compiled CSS will be this:


.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;
}
.accordion__copy {
  display: none;
  padding: 1rem 1.5rem 2rem 1.5rem;
  color: gray;
  line-height: 1.6;
  font-size: 14px;
  font-weight: 500;
}
.accordion__copy--open {
  display: block;
}

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

How To Create a Fullscreen Background Video using CSS and JavaScript?CSSHow to create Glowing Text using CSS?CSSQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptRecursive WITH Queries in Postgres (Common Table Expressions)Postgres3 ways to pass a variable in url() function in SCSS (Sass)SCSSHow to get the height and width of an element using JavaScript?JavaScript