Helpful Sass Mixins

13 March 2012 | Posted by Andy Rossi

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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.