Useful Sass Mixins to include in your web projects

If you don’t know already, mixins are one of the most powerful features of Sass. Mixins allow for efficient and clean code repetitions as well as an easy way to adjust your code with ease. If you are using Sass in your development workflow, no doubt you are using some of the mixins that I have covered below but some might also be new and helpful.

If you are new to Sass, I would highly recommend you check out my Why you scared of Sass? post first.

Responsive Breakpoints

Just set your breakpoint at whatever width you desire and go crazy.


@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: 64.375em) { @content; }
  }
  @else if $point == medium {
    @media (min-width: 50em) { @content; }
  }
  @else if $point == small {
    @media (min-width: 37.5em)  { @content; }
  }
}

Usage:


.page-wrap {
  width: 75%;
  @include breakpoint(large) { width: 60%; }
  @include breakpoint(medium) { width: 80%; }
  @include breakpoint(small) { width: 95%; }
}

Output:


.page-wrap {
  width: 75%;
}
@media (min-width: 64.375em) {
  .page-wrap {
    width: 60%;
  }
}
@media (min-width: 50em) {
  .page-wrap {
    width: 80%;
  }
}
@media (min-width: 37.5em) {
  .page-wrap {
    width: 95%;
  }
}

Retina Images

This mixin by Jason Zimdars is a breeze to use and offers a greater visual experience to those that are lucky enough to have a retina device.


@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) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

Usage:


div.logo {
   background: url("logo.png") no-repeat;
   @include image-2x("logo2x.png", 100px, 25px);
 }

Output:


div.logo {
  background: url("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) {
  div.logo {
    /* on retina, use image that's scaled by 2 */
    background-image: url("logo2x.png");
    background-size: 100px 25px;
  }
}

Clearfix

There are a few ways to implement the clearfix hack but the following Sass Mixin has been in my toolbox for the last year thanks to this article on Nicolas Gallagher’s blog.


@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

Usage:


.article {
     @include clearfix();
}

Output:


.article {
  *zoom: 1;
}
.article:before, .article:after {
  content: "";
  display: table;
}
.article:after {
  clear: both;
}

Box Sizing

Reset your elements box model with ease.


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

Usage:


*,
*:after,
*:before {
  @include box-sizing(border-box);
}

Output:


*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Border Radius

Always a handy mixin. Set every border radius or just a single side without worrying about all those prefixes.


@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

// Single side border-radius

@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
   -webkit-border-top-left-radius: $radius;
   border-top-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
     -webkit-border-top-right-radius: $radius;
     border-top-right-radius: $radius;
     background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
   -webkit-border-bottom-left-radius: $radius;
   border-bottom-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
     -webkit-border-top-left-radius: $radius;
     border-top-left-radius: $radius;
     background-clip: padding-box;
}

Usage:


.button {
  @include border-radius(5px);
}

.submit-button {
  @include border-top-radius(10px);
  @include border-right-radius(8px);
  @include border-bottom-radius(10px);
  @include border-left-radius (6px);
}

Output:


.button {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
}

.submit-button {
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  background-clip: padding-box;
}

Opacity

Set the opacity for all browsers and provide a filter fallback for IE8.


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

Usage:


.article-heading {
  @include opacity(0.8);
}

Output:


.article-heading {
  opacity: 0.8;
  filter: alpha(opacity=0.8);
}

Center-align a block level element

Quickly center any element within its parent. Requires width or max-width to be set.


@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Usage:


.footer-wrap {
  width: 450px;
  @include center-block;
}

Output:


.footer-wrap {
  width: 450px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Text Overflow

An easy way to truncate text with an ellipsis. Requires the element to be block or inline-block.


@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Usage:


.text-truncate {
  @include text-truncate;
}

Output:


.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Absolute Positioned

Pass in the desired location of your target element to produce all the necessary positioning code.


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

Usage:


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

Output:


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

Line Height

This mixin sets the line height in rem's with a px fallback.


@mixin line-height($heightValue: 12 ){
    line-height: $heightValue + px; //fallback for old browsers
    line-height: (0.125 * $heightValue) + rem;
}

Usage:


body {
  @include line-height (16);
}

Output:


body {
  line-height: 16px;
  line-height: 2rem;
}

Reference: Web Design Weekly

WordPress / Web Development Tutorials
(Best WordPress Tutorials)