Academy / Advanced Level: HTML and CSS

CSS Preprocessors: SASS/SCSS

Nesting for Cleaner Code

Nesting allows you to write CSS that mirrors the structure of your HTML, reducing redundancy and making your code easier to read and manage. Instead of writing separate CSS rules for child elements, you can nest them inside their parent selector.

Example of Nesting:

nav {
  background-color: #333;

  ul {
    margin: 0;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 20px;

      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

In this example:

• The SCSS structure mirrors the HTML structure of the <nav> element and its nested <ul> and <li> elements.
• This makes it easier to maintain and visualize your styles.