Nesting Selectors in Sass

Sass allows you to easily nest your selectors and organize your rules hierarchically:

.main {
  background-color: antiquewhite;
  margin: 0 auto;

  img {
    max-width: 100%;
    transform: rotate(3deg);
  }

  p:first-child {
    font-size: 1.2em;

    span {
      background-color: burlywood;
      padding: 0.2em 0.4em;
    }
  }
}

The above, once compiled to CSS, would yield the following:

.main {
  background-color: antiquewhite;
  margin: 0 auto;
}
.main img {
  max-width: 100%;
  transform: rotate(3deg);
}
.main p:first-child {
  font-size: 1.2em;
}
.main p:first-child span {
  background-color: burlywood;
  padding: 0.2em 0.4em;
}
Recommended React course

Properties in the same namespace

You can also nest properties that are in the same namespace. For example, background properties can be nested like this. Notice the use of a colon after the background keyword in the example:

.main {
  margin: 0 auto;

  background: {
    color: antiquewhite;
    image: url(images/gator.svg);
    repeat: repeat-x;
    size: 36px 48px;
  }
}

This would yield the following CSS:

.main {
  margin: 0 auto;
  background-color: antiquewhite;
  background-image: url(images/gator.svg);
  background-repeat: repeat-x;
  background-size: 36px 48px;
}

👉 Over-nesting can create messy CSS, so keep it at a maximum of just a few levels deep.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#