Helpful Sass Mixins

Pull up a stool while Professor Rossi drops some Sass knowledge all up in here.

Do you use Sass? Do you like to save time when performing boring, repetitive tasks? [drumroll] Then this is the article for you!

First, I need to make the point that this is a living document. As I find or write more useful Sass shortcuts (or find deadly errors in what I have written), I will add/correct them here. With that out of the way, commence the reading.

Typography

Custom Fonts - Based off of Typekit selection

I use this bit to define any custom fonts (Typekit fonts in this case), so I don’t have to remember all the different weights that come within a font. For example, here’s a bit of code to reuse the Facit typeface:

@mixin facit {
font-family: “facitweb”, Verdana, Arial, sans-serif;
}
view raw custom-font.scss hosted with ❤ by GitHub

The string “facitweb” is based on Typekit’s own naming convention. Make sure you use the right name.

Font Size

Use this one at your own risk. This is based on the “rem”, or root em, size unit. If you must use the traditional non-mixin “em” instead of the “rem” (i.e. have to support non-modern browsers), then stick with what you know. This is more of an experiment anyhow.

@mixin font-size( $value: 12 ) {
font-size: value + px;
font − size: (value / 10) + rem;
}
view raw font-size.scss hosted with ❤ by GitHub

Hidden Text

This is a brand spanking new bit of code that gets rid of that -9999px text replacement hack. Thanks to Nicolas Gallagher for bringing it to light!

@mixin hide-text {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
view raw hidden-text.scss hosted with ❤ by GitHub
 

Border Radius

This is a simple border radius mixin, but it is so much more convenient than typing vendor prefixes over and over and over and over and over and over and over…

@mixin border-radius ( $value: 3px ) {
-webkit-border-radius: $value;
-moz-border-radius: $value;
border-radius: $value;
// keeps background from busting out of border
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
view raw border-radius.scss hosted with ❤ by GitHub

Transparency

All the opacities!

@mixin opacity ( $value: 0.5 ) {
opacity: $value;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=” $value * 100 )”;
filter: alpha(opacity= $value * 100 );
zoom: 1;
}
view raw opacity.scss hosted with ❤ by GitHub

Shadows

Just a simple box shadow. Again, let’s not worry about those vendor prefixes.

@mixin box-shadow( $horiz : .5em , $vert : .5em , $blur : 0px , $spread : 0px , $color : #000000 ){
-webkit-box-shadow: $horiz $vert $blur $spread $color;
-moz-box-shadow: $horiz $vert $blur $spread $color;
box-shadow: $horiz $vert $blur $spread $color;
}
view raw box-shadow.scss hosted with ❤ by GitHub

Ok, so…

There you go! I shall be on the hunt for more Sass shortcuts and add them here as soon as I give them the official thumbs-up.