gistfile1.scss

.my-awesome-selector{
  // Any vars should be declared at the top of the containing scope
  $element_border_width:    10px;
  $element_border_color:    10px;

  // include any mixins after the variables
  @include border-radius(5px);
  @include box-sizing(border-box);

  // then define properties for the selector
  background-color: pink;
  border: $element_border_width solid $element_border_color;
  padding: 10px;

  // pseudo selectors for the current element first
  &:hover{ background-color: red; }
  &:before{ ... }

  // sub element selectors, if you find yourself going more than about
  // three levels deep you should probably rethink maybe using more
  // classes to split the styling up.

  // ...any decendant selectors should be listed first
  & > section{ ... }
  & + section { ... }

  // ...then normal sub selectors
  article{
    color: black;
    font-size: 15px;
    line-height: 20px;

    h2{ ... }
    a{ ... }
  }
}