SCSS Nesting

You may have noticed that when you write HTML, it has clear nested and visual hierarchy but CSS does not have. SCSS Nesting will let your CSS selector in a way that it follows same visual hierarchy of HTML.

Code Structure:
nav{
  ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li{
    float: inline-block;
  }

  a{
    display: block;
    padding: 5px 15px;
    text-decoration: none;
  }
}
Result:
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 5px 15px;
  text-decoration: none;
}

Share this

Related Posts