css nested selectors

nesting.scss

/* It's common to want to make the selector nesting the same as the dom */
#content {
  .nav {
    ul {
      margin: 0;
      padding: 0;
      li {
        float: left;
        margin: 0;
        padding: 0;
        a {
          float: left;
          .icon {
            font-size: 12px;
          }
        }
      }
    }
  }
}

/* It's much better to keep the selectors to the minimum required by the structure/css */
#content .nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    float: left;
    margin: 0;
    padding: 0;
  }
  a {
    float: left;
  }
  .icon {
    font-size: 12px;
  }
}

/* It's the exact same as I'd write without sass, but without the duplicated context */
#content .nav ul {
  margin: 0;
  padding: 0;
}
#content .nav li {
  float: left;
  margin: 0;
  padding: 0;
}
#content .nav a {
  float: left;
}
#content .nav .icon {
  font-size: 12px;
}

/* Sass's nesting is great, if you keep nesting to a logical context you're golden */