Using Nesting Styles in Preprocessors

Nesting styles are one of the core features of CSS preprocessors. While the concept is simple, there are a few things to be aware of. In this video, we’ll go over the basics of nesting and how to incorporate combining classes as well as pseudo-classes. We’ll do all of this while sprinkling in some best practices along the way.

The tutorial explains how to set styles for separate colored boxes and associated hover states. You will learn to nest multiple boxes, change the styles of each element (including size, labeling and margins). An understanding of basic coding principles is needed to complete this tutorial.

Estimated time: 5 minutes

David East

David East is a Developer Programs Engineer for Google, working on Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @_davideast.

Newsletter

0 Comments

No comments yet

Leave a Reply

*
* Minimum length: 20 characters