The Best Sass Mixins To Date

Posted on by Glen Wheeler

Sass Logo with Sass Code in the background

Sass, Syntactically Awesome Style sheets. Sass is a professional grade cascading style sheet language. Sass works with all versions of CSS which allows you to create the most beautiful, sustainable style sheets. Sass is very well supported by its core team and is now an industry standard CSS extensions language.

What I want to do in this post is show you some of the best Sass Mixins to date. These are the most used Mixins across my last few projects and I'd like to share them with you. So, here goes.

REM Font Sizing with Pixel Fall Back

A very handy mixin to size your fonts using rem. This mixin also uses a pixel based fall back for legacy older browser support. The mixin is very simple, first we create our function to include a simple division, the division will be our pixel based input divided by our base font size. In this case, the base font size is 16px, this base font size value will change depending on your own base font size. This then returns our font size multiplied by 1rem to give us both our rem size and our pixel fall back. The rem size always takes priority until rem is not supported. Here is the Sass code and how it should be used.

Sass:

 
				@function calculateRem($size) {
				  $remSize: $size / 16px;
				  @return $remSize * 1rem;
				}

				@mixin font-size($size) {
				  font-size: $size;
				  font-size: calculateRem($size);
				}
			

Usage:

 
				.sample {
					@include font-size(28px)
				}
			

Output CSS:

 
				.sample{
					font-size: 28px;
					font-size: 1.75rem;
				}
			

Absolute Positioning Mixin

There's probably a time in the development of your project where you'll have to use some absolute positioning. Instead of repeating it every single time, you can use this clever little mixin that keeps absolute position nice and simple.

Sass:

 
				@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
					top: $top;
					right: $right;
					bottom: $bottom;
					left: $left;
					position: absolute;
				}
			

Usage:

 
				.sample {
					@include abs-pos(10px, 10px, 5px, 15px);
				}
			

Output CSS:

 
				.sample{
				  top: 10px;
				  right: 10px;
				  bottom: 5px;
				  left: 15px;
				  position: absolute;
				}
			

Opacity Mixin

A very small but common property to make objects on your page transparent. This could be used on buttons, tabs, form elements and even fonts.

Sass:

 
				@mixin opacity($opacity) {
					opacity: $opacity;
					$opacity-ie: $opacity * 100;
					filter: alpha(opacity=$opacity-ie); //IE8
				}
			

Usage:

 
				.sample {
					@include opacity(0.8);
				}
			

Output CSS:

 
				.sample{
					opacity: 0.8;
					filter: alpha(opacity=80);
				}
			

Handling Your Breakpoints with a mixin

Moving to a mixin for responsive design. If you have ever been involved in developing responsive websites then you'll know you need to define breakpoints. Instead of retyping your breakpoints every time, we can use a mixin to store the breakpoints with sensible names which can then be retrieved.

Sass (Storing the variables first for the mixin to retrieve):

 
				// This can be stored globally and can be pulled in by the mixin
				$breakpoints: (
				  'tiny':   ( max-width:  767px ),
				  'small':  ( min-width:  768px ),
				  'medium': ( min-width:  992px ),
				  'large':  ( min-width: 1200px ),
				  'custom': ( min-height:  40em )
				);

				// Creating the mixin
				@mixin breakpoint($name) {
						@if map-has-key($breakpoints, $name) {
								@media #{inspect(map-get($breakpoints, $name))} {
							@content;
						}
					}
					@else {
						@warn "Couldn't find a your breakpoint named `#{$name}`.";
					}
				}
			

Usage:

 
				.sample {
					font-size: 30rem;

					@include breakpoint(medium) {
						font-size: 22rem;
					}
				}
			

Output CSS:

 
				.element {
					font-size: 30rem;
				}

				@media (min-width: 992px) {
					.element {
						font-size: 22rem;
					}
				}
			

Transition Mixin

This is one I use quite often, especially for subtle hover effects on buttons.

Sass:

 
				@mixin transition($transition-property, $transition-time, $method) {
				    -webkit-transition: $transition-property $transition-time $method;
				    -moz-transition: $transition-property $transition-time $method;
				    -ms-transition: $transition-property $transition-time $method;
				    -o-transition: $transition-property $transition-time $method;
				    transition: $transition-property $transition-time $method;
				}
			

Usage:

 
				.sample {
					@include transition(all, 0.6s, ease-in-out);
				}

				// Transition methods Taken from http://www.w3schools.com/css/css3_transitions.asp
				
				// ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
				// linear - specifies a transition effect with the same speed from start to end
				// ease-in - specifies a transition effect with a slow start
				// ease-out - specifies a transition effect with a slow end
				// ease-in-out - specifies a transition effect with a slow start and end
				// cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
			

Output CSS:

 
				.sample{
					-webkit-transition: all 0.2s ease-in-out;
					-moz-transition: all 0.2s ease-in-out;
					-ms-transition: all 0.2s ease-in-out;
					-o-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
				}
			

Box Sizing Mixin

Most people set box sizing right from the off, and we can still do that with this mixin. However if you need to use your mixin in different areas, then stop repeating it every single time. This mixin allows you to assign box sizing with one simple line of code.

Sass:

 
				@mixin box-sizing($box-model) {
					-webkit-box-sizing: $box-model; // Safari <= 5
					-moz-box-sizing: $box-model; // Firefox <= 19
					box-sizing: $box-model;
				}
			

Usage:

 
				.sample{
					@include box-sizing(border-box);
				}
			

Output CSS:

 
				.sample{
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
				}
			

Feel free to use any of these mixins, you'll find that they'll make your style sheets a lot more manageable and maintainable. If you have any of your own, I would love for you to share them with me and everyone else who visits the website.

Share this post with your friends, create discussion: