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;
}

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;

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.