Nesting

Code

.nav {
  background: #333;

  ul {
    list-style: none;
    margin: 0;
  }

  li {
    display: inline-block;

    a {
      color: #fff;
      text-decoration: none;

      &:hover {
        color: #1976d2;
      }
    }
  }

  > .logo { font-weight: bold; }
}

Explanation

Sass nesting mirrors HTML structure inside selectors, improving readability. The & always refers to the parent selector, so &:hover compiles to .nav li a:hover. Deep nesting can bloat output, so keep it shallow and use child combinators where appropriate.

More Sass Snippets