The '&' Operator in SASS

The ampersand "&" operator is often used when nesting in SASS and is an extremely useful feature.

It can be a great time-saver, especially if you happen to be coding your stylesheets with the BEM methodology, or using any systematic naming convention for your class names.

See the following HTML:

<button class = "btn btn--red"> Click me! </button>

Typical styling would be something like this:

.btn {
  display: inline-block;
  padding: 15px 32px;
}
.btn--red {
  background-color: #ff0000; // Red
}
.btn:hover {
  background-color: #fff; // White
}

With the & operator we can be much more efficient:

.btn {
  display: inline-block;
  padding: 15px 32px;
  &--red {
    background-color: #ff0000; // Red
  }
  &:hover {
    background-color: #fff; // White
  }
}

Notice that we’ve now nested the child selectors that use the same .btn name, represented by the & operator. name.

When compiled the & operator will be replaced by its enclosing selector name!

In the next post, we’ll learn about control directives.

Related Posts:

• An Introduction to SASS
• Setting up SASS
• Using SASS Variables