7. Use mixins sparingly (and avoid @extend)

Avoid the temptation of abstracting code into mixins. There are a few areas where mixins are perfect. The code for CSS text truncation (e.g. @mixin Truncate) or iOS style inertia scrolling panels, where there are number of pseudo selectors to get right for different browsers. Another good use case can be complex font stacks.

Tip

Font stacks are difficult to get right and tedious to author. The sanest way I've found to deal with fonts is to have the body use the most common font stack and then only override this with a different font-stack as and when needed.

For example:

.med-Video {
    position: relative;
    background-color: $color-black;
    font-size: $text13;
    line-height: $text15;
    /* At medium sizes we want to bump the text up */
    @media (min-width: $M) {
        @mixin FontHeadline;
        font-size: $text15;
        line-height: $text18;
    }
}

For simpler font-stacks, a variable can handle this need easily so may be preferable...