Totally awesome Sass tips

/* main.scss */

/* standard clearfix, but with a placeholder selector */
/* this means the clearfix class itself won't be in the compiled CSS, only the classes which extend it */
/* Sass placeholder selectors: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_ */
%clearfix {
    *zoom: 1;

    &:before,
    &:after {
      content: " ";
      display: table;
    }

    &:after {
      clear: both;
    }
}

/* some container element - needs clearfix so use @extend */
.container {
    @extend %clearfix;
    background: #f1f1f1;

    /* IE8 needs a fix - parent selectors */
    .lt-ie9 & {
        border: 1px solid red;
    }

    /* BEM style! You can use this syntax to target elements and modifiers in selectors */
    /* BEM: http://bem.info/ */
    /* link element in container */
    &__link {
        color: blue;

        /* modifier for link */
        &--active {
             /* built-in Sass colour functions */
             /* more colour functions: http://robots.thoughtbot.com/controlling-color-with-sass-color-functions */
             lighten(blue, 10%);
        }
    }
}

.nav {
    @extend %clearfix;
}

/* main.css */

/* The %clearfix placeholder doesn't get compiled as a class - it only exists in the Sass file   */
/* Since we've used extend, all the classes which extend %clearfix are in the same rule       */
/* This cuts down on the amount of CSS in the output - if we'd just used @include then each */
/* selector would have it's own version of the same clearfix rule                                         */
.container, .nav {
    *zoom: 1;
}

.container:before, .nav:before, .container:after, .nav:after {
    content: " ";
    display: table;
}

.container:after, .nav:after {
    clear: both;
}

/* The container element doesn't contain a copy of the clearfix rules */
.container {
    background: #f1f1f1;
}

/* IE8 styles are split out nicely */
.lt-ie9 .container {
    border: 1px solid red;
}

/* Here's the BEM rules - these now become the full class name */
.container__link {
    color: blue;
}

/* and inherit so we can have the modifier class names */
.container__link--active {

    /* and our blue colour has been converted to a lighter shade */
    color: #3333ff;
}