Code nesting in sass;

SCSS makes writing CSS code much faster and simpler. One of the ways it helps achieve this is by utilizing of code nesting feature. In normal CSS, each item contains its separate code, which makes it much more complicated since this may result in a huge chunk of unmanageable code.

Example; Consider having three items, a parent div with the class outer, a child div with the class inner, and a paragraph inside the inner div.

   // .html file - not HTML commenting syntax
<div class="outer">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Applying some styling to these items in CSS would be as follows;

//.css file - not CSS commenting syntax
.outer { 
  background-color: #cd6799;
  border-radius: 15px;
}

.outer .inner {
  text-align: center;
  text-transform: uppercase;
}

.outer .inner p {
  color: #ffffff;
}

It gets a bit complex if we have to hover on the outer div;

//.css file - not CSS commenting syntax
.outer:hover() {
  box-shadow: 2px 2px 12pc rgba(0, 0, 0, 0.4);
}

Using SCSS we can group/nest our code based on the items hierarchy down the line as follows;

//.scss file
.outer {
  background-color: #cd6799;
  border-radius: 15px;
  .inner {
    text-align: center;
    text-transform: uppercase;
    p {
      color: #ffffff;
    }
  }
}

If need be, applying hover effect on the outer div is quite simple when using SCSS;

//.scss file
.outer {
  background-color: #cd6799;
  border-radius: 15px;
  .inner {
    text-align: center;
    text-transform: uppercase;
    p {
      color: #ffffff;
    }
  }
  &:hover {
    box-shadow: 2px 2px 12pc rgba(0, 0, 0, 0.4);
  }
}

While using SCSS, there are no actual limitations on nesting but for good code design, three levels should be efficient enough to ensure the resulting CSS remains manageable.

Applying the hover pseudoclass in the SCSS example above, we used the ‘&’ symbol. The is one of the most useful symbols that is utilized in SCSS. Basically, this symbol is used in many instances. In our example, it was useful in accessing the class outer which had already been defined. So instead of repeating the same selector or class like .outer, using the '&' symbol grants us access to the class name. Simply put, the & symbol repeats the immediate parent within the nesting levels as demonstrated.

We can also use the BEM naming method (Block Element Modifier). For example, assuming there is a large and a small image in the user information we can use the BEM method by applying two underscores to separate other items into their own levels and two hyphens to separate the images. Example;

//.scss file
.user__box {
  background-color: #cd6799;
  .user__grid {
    display: flex;
    flex-direction: column;
    .user__image—small {
      width: 100%;
    }
    .user__image—large {
      max-width: 50%;
    }
    .user-info {
      color: #ffffff;
      text-align: center;
    }
  }
}

The output would be as follows;

//.css file - not actual css commenting syntax
.user__box {
  background-color: #cd6799;
}
.user__box .user__grid {
  display: flex;
  flex-direction: column;
}
.user__box .user__grid .user__image—small {
  width: 100%;
}
.user__box .user__grid .user__image—large {
  max-width: 50%;
}
.user__box .user__grid .user-info {
  color: #ffffff;
  text-align: center;
}

Finally, we can also nest CSS properties applied to various selectors. Example;

//.scss file
body {
  background: {
    color: rgba(0, 0, 0, 0.3);
    image: url(‘images/header.png’);
    repeat: no-repeat;
    position: top;
  }
}

This results to ;

//.css file - not actual css commenting syntax.
body {
  background-color: rgba(0, 0, 0, 0.3);
  background-image: url(‘images/header.png’);
  background-repeat: no-repeat;
  background-position: top;
}