Evan's SASS Mixins

A collection of my favorite custom SASS mixins.

Requirements

These scripts were designed to fit into my design workflow, which makes use of :

• SASS
• Compass
• Foundation 5, or at least it's _functions.scss file

Medium.com Style Underlines

This mixin is intended to replicate Medium.com's super sexy underlines style, elaborated in fantastic detail by Marcin Wichary here.. This mixin is a bit of a remix based on several other's attempts, with my own added contributions. It supports clearing descenders and graceful multiline spanning.

Usage example:

a.author {
    color: #5f5164;
    @include underline(#fff, #D6DDDE)

    &:hover {
        @include underline(#fff, #5f5164)
    }
}

Parameters (in order):

• Background color; defaults to #fff.
• Underline color; defaults to #ccc.
• Distance of underline from text base; defaults to 2.
• Width of underline; defaults to 1.
• Clear descenders true/false; defaults to yes.