Code Responsible

Skip navigation

Useful SASS Mixins

Get Sassy with Mixins

I’m a huge fan of SASS and I’ve been using it as much as possible in my development work flow. SASS is great for a number of reasons. It gives you the ability to use nested rules and variables in your CSS but one of my favorite things about SASS is the ability to use Mixins.

Mixins give you the ability to re-use whole chunks of CSS, properties or selectors throughout your code without having to copy and paste. In your classes all you need to do is reference a mixin and SASS will take care of the rest.

These are a few of the Mixins I’ve found I use a lot throughout my projects.

Github Download

REM Units with PX Fallback

SASS Mixin

@mixin rem($property, $values...) {
    $n: length($values);
    $i: 1;

    $pxlist: ();
    $remlist: ();

    @while $i <= $n {
        $itemVal: (nth($values, $i));
        @if $itemVal != "auto"{
            $pxlist: append($pxlist, $itemVal + px);
            $remlist: append($remlist, ($itemVal / 10) + rem);
        }@else{
            $pxlist: append($pxlist, auto);
            $remlist: append($remlist, auto);
        }
       
   
        $i: $i + 1;
    }

    #{$property}: $pxlist;
    #{$property}: $remlist;
}

Usage

.main{
    @inlcude rem("margin", 10, 0);
    @inlcude rem("padding", 10);
    @inlcude rem("font-size", 12);
}

Output

.main{
    margin:10px 0;
    margin:1rem 0;
    padding:10px;
    padding:1rem;
    font-size:12px;
    font-size:1.2rem;
}

Linear Gradients

SASS Mixin

@mixin linearGradient($top, $bottom){
    background: $top; /* Old browsers */
    background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

Usage

.button{
    @include linearGradient(#cccccc, #666666);
}

Output

.button{
    background: #cccccc;
  /* Old browsers */
  background: -moz-linear-gradient(top, #cccccc 0%, #666666 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #666666));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #cccccc 0%, #666666 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #cccccc 0%, #666666 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #cccccc 0%, #666666 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #cccccc 0%, #666666 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
  /* IE6-9 */
}

Retina Images

SASS Mixin

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width + px $height + px;
    background-size: $width / 10 + rem $height / 10 + rem;
  }
}

Usage

.logo{
    background:url(logo.png) no-repeat;
    @include image-2x(logo-hd.png", 120, 30);
}

Output

.logo {
  background: url(../img/logo.png) no-repeat;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .logo {
    background-image: url("../img/logo_hd.png");
    background-size: 120px 30px;
  }
}

Media Query Breakpoint

SASS Mixin

@mixin breakpoint($size) {
    @media only screen and (max-width : $size + px) { @content; }
}

Usage

.main{
    width:1100px;
    @include breakpoint(940){ width:100%; }
}

Output

.main{
    width:1100px;
}
@media only screen and (max-width: 940px) {
  .main {
    width: 100%;
  }
}

Rounded Corners

SASS Mixin

@mixin roundedCorners($size){
    -webkit-border-radius: $size + px;
        -moz-border-radius: $size + px;
        border-radius: $size + px;  
}

Usage

.button{
    @include roundedCorners(10);
}

Output

.button{
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
}

Opacity

SASS Mixin

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

Usage

.image{
    @include opacity(.8);
}

Output

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

41 Posts

Ryan Burgess

Ryan Burgess is a Manager, UI Engineering at Netflix in San Francisco, California. Previously at Evernote. Listen to Ryan on the Front End Happy Hour podcast. He's also the creator of SensesLost.com, an online-based arts and culture magazine that focuses on graffiti and tattoo art.

14 Responses to “Useful SASS Mixins”

Leave a Reply

Comment Form