A Sassy Link Mixin

March 24, 2014

Lately I’ve been trying to get myself to write more @mixins, because I’ve found they help standardize components in Sass. Last night I wrote this @mixin I believe creates a really good baseline for links in a project.

It goes a little something like this:

$link: #e74c3c !default

@mixin link()
color: $link
text-decoration: none
[at]include print
content: ” (“attr(href)”) ”
&:hover, &:focus
color: lighten($link, 15%)
text-decoration: underline

Since moving over to Sass I’ve been pretty good about writing :hover and :focus states for my links, but I admit it can be tedious. It also hooks into another [at]include print @mixin I’ve recently begun using for creating a seperate print stylesheet.

$print: false !default

@mixin print()
[at]if $print == true

So getting back to the link @mixin, it will display the link url (perfect for printed pages) after the link text, but only if the variable $print: true is in the global stylesheet.

I would typically use this mixin in a typography.sass file and just declare:

[at]include link