Variables

Variables in sass are a way to store information. Generally in a sass project variables will be assigned typefaces, colors, or dimensional defaults that have been set for your project. Sass variables allow a user to make a change from a singular point instead of finding every single selector. Ex. "Hey Bob I don't like this main font color can you change it to this light blue."

  
  $main-font: Helvetica, Arial, "Lucida Grande", sans-serif;
  $other-font: $main-font;
  

  
  $full-width: $body-width + $sidebar-width;
  $something-block: $full-width / 2;
  

Nesting

Have you ever looked through a 2000 line file of css searching for a specific class or id that wasn't formatted correctly and maybe worse inline on a html file? Maybe even in this file the styles were repeated and repetitive. Nesting in sass is an answer to all of this and it makes editing and upkeeping your css so much easier.

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

      li {
        display: inline-block;

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

Mixins

Compass provides many mixins to make writing css and expecially css3 easier. Not only easy but cross browser compatible.

Take this example:

  .box {
    @include border-radius(10px);  /* This translates into what is below */
  }


  .box {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
  }

Extend

Extend allows you to do exactly what it says. It allows you to extend css properties to other selectors. Once again keeping things DRY and clean.

  .main {
    background: red;
    padding: 20px;
    border: 1px dotted green;
  }

  .cool-thing {
    @extend .main; /* Now .cool-thing has .main's properties. */
    background: blue; /* Changes one of the extended properties to blue */
  }