DEV Community

loading...
Cover image for Code nesting in sass;

Code nesting in sass;

cyrusCodes
👋 Hello, I'm Cyrus! 🖥️ Web developer ✍️ Tech Blogger 🖱️ UI / UX Designer. 📌 cyruscodes.hashnode.dev ☕ buymeacoffee.com/cyrusCodes
Updated on ・3 min read

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>

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Discussion (2)

Collapse
cchana profile image
Charanjit Chana

I've never come across nested CSS properties before, that looks really useful.

Collapse
cyruscodes profile image
cyrusCodes Author

It's really useful. Try it and you'll be surprised. Thanks for the response.