Mixins are a smart way of reusing our code.
One of the last steps in refactoring is replacing common patterns in our code with reusable mixins.

Refactoring Style Into Mixins

Let’s start by writing a mixin that writes our @font-face declarations
Let’s say we want to refactor the following code existing inside the _typography.scss partial.

/* Web Fonts -------------------- */
@font-face {
  font-family: 'Abolition Regular';
  src: url('../fonts/abolition-regular-webfont.eot');
  src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/abolition-regular-webfont.woff') format('woff'),
       url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}
... 

1. Create Mixins Partial

First, create the _mixins.scss partial file.

Styles File Structures

scss
|__ style.scss
|__ base
|     _index.scss
|     _base.scss     
|     _mixins.scss
|     _variables.scss
|__ components
|     _index.scss
|     _extends.scss
|     _buttons.scss
|     _icons.scss
|     _typography.scss
|     etc...
|__ layout 
      _index.scss
      _extends.scss
      _header.scss
      _footer.scss
      _containers.scss
      _columns.scss
      etc... 

2. Import Mixins Partial

Import _mixins.scss partial file in the _index.scss base partial file.
Always import your mixins right after the variables partial.

_index.scss

/* Base Imports ======================*/
@import 'variables';
@import 'mixins';
@import 'base'; 

3. Write Your Mixins Code

Refactor the above font face code into a dynamic mixin.

_mixins.scss

// Web Fonts
@mixin font-face($family, $file) {
  @font-face {
    font-family: $family;
    src:  url('#{$path-font}/#{$file}-webfont.eot');
    src:  url('#{$path-font}/#{$file}-webfont.eot?#iefix') format('embedded-opentype'),
          url('#{$path-font}/#{$file}-webfont.woff') format('woff'),
          url('#{$path-font}/#{$file}-webfont.ttf') format('truetype');
  }
} 

4. Include the Mixins in Your Style

Now include your mixin instead of the old font face code.

_typography.scss

/* Web Fonts -------------------- */
@include font-face('Abolition Regular', abolition-regular);
...