Useful Sass Mixins

font-family-mixin.sass

=font-family($family: "proxima-nova")
     @if $family == "proxima-nova"
          font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif
     @if $family == "freight-sans"
          font-family: "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif

rem-basic-example.sass

html
     font-size: 62.5%
     body
          font-size: 1.4rem // 14px
     h1
          font-size: 2.4rem // 24px

rem-mixin-usage.sass

html
     font-size: 62.5%
     body
          +font-size(1.4)
     h1
          +font-size(2.4)

rem-mixin.sass

=font-size($size: 1.6, $line: $size * 1.25)
     font-size: ($size * 10) + px
     line-height: ($line * 10) + px
     font-size: $size + rem
     line-height: $line + rem

responsive-mixin-usage.sass

#menu
    float: right
    max-width: 640px
    @include respond-to($tablet-portrait)
      margin-right: 20px
    @include respond-to($phone)
      margin-right: 10px

responsive-mixin.sass

$phone: '(max-width: 480px)'
$tablet-portrait: '(max-width: 767px)'
$tablet-landscape-desktop: '(min-width: 768px) and (max-width: 979px)'
$large-desktop: '(min-width: 1200px)'
$non-retina: 'screen and (-webkit-max-device-pixel-ratio: 1)'
$retina: 'screen and (-webkit-min-device-pixel-ratio: 2)'
 
=respond-to($media)
  @media #{$media}
    @content

responsive-simple.sass

=phone
     @media (max-width: 480px)
          @content

#logo
     max-width: 320px
     @include phone
          /* The CSS below will be added to @content */
          width: 120px

utility-hide-text-mixin.sass

=hide-text()
     font: 0/0 a
     text-shadow: none
     color: transparent

utility-mp0-mixin.sass

=mp0()
     margin: 0
     padding: 0