Ads Top

Sass nesting selectors

Nesting as like HTML nesting as:

HTML Code:
<nav>
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
    </ul>
  </nav>

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Compiled Code:
nav ul {
margin: 0;
padding: 0;
list-style: none;}
nav li {
display: inline-block;
}

nav a {
display: block;
padding: 6px 12px;
text-decoration: none;

}

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.