Small collection of useful SASS mixins

#misc #snippet

I happen to use these little SASS mixins quite often, but did not have Gist created yet. So I decided to create a small collection for quick copy and easy lookup next time I need them. So, here’s a collection of small yet useful SASS mixins - feel free to copy to your project!

Transition Mixin

/* -------------------------------------------------------------------------- */
/* Transition */
/* -------------------------------------------------------------------------- */
@mixin transition($value: all 200ms linear) {
  -webkit-transition: $value;
  -moz-transition   : $value;
  -ms-transition    : $value;
  -o-transition     : $value;
  transition        : $value;
}

Transform Mixin

/* -------------------------------------------------------------------------- */
/* Transform */
/* -------------------------------------------------------------------------- */
@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform   : $value;
  -ms-transform    : $value;
  -o-transform     : $value;
  transform        : $value;
}

Translate X Mixin

/* -------------------------------------------------------------------------- */
/* Translate X */
/* -------------------------------------------------------------------------- */
@mixin translateX($value) {
  -webkit-transform: translateX($value);
  -moz-transform:    translateX($value);
  -ms-transform:     translateX($value);
  -o-transform:      translateX($value);
  transform:         translateX($value);
}

Translate Y Mixin

/* -------------------------------------------------------------------------- */
/* Translate Y */
/* -------------------------------------------------------------------------- */
@mixin translateY($value) {
  -webkit-transform: translateY($value);
  -moz-transform:    translateY($value);
  -ms-transform:     translateY($value);
  -o-transform:      translateY($value);
  transform:         translateY($value);
}

Box Shadow Mixin

/* -------------------------------------------------------------------------- */
/* Box-Shadow */
/* -------------------------------------------------------------------------- */
@mixin box-shadow($value: 0 0 5px 0 #000) {
  -webkit-box-shadow: $value;
  -moz-box-shadow   : $value;
  -ms-box-shadow    : $value;
  -o-box-shadow     : $value;
  box-shadow        : $value;
}

Border Radius Mixin

/* -------------------------------------------------------------------------- */
/* Border Radius */
/* -------------------------------------------------------------------------- */
@mixin border-radius($value: 3px) {
  -webkit-border-radius: $value;
  -moz-border-radius   : $value;
  -ms-border-radius    : $value;
  -o-border-radius     : $value;
  border-radius        : $value;
}

Background Size Mixin

/* -------------------------------------------------------------------------- */
/* Background Size */
/* -------------------------------------------------------------------------- */
@mixin bg-size($value: cover) {
  -webkit-background-size: $value;
  -moz-background-size   : $value;
  -ms-background-size    : $value;
  -o-background-size     : $value;
  background-size        : $value;
}

Media Query Mixin for Responsive Design

/* -------------------------------------------------------------------------- */
/* Media Query */
/* -------------------------------------------------------------------------- */
@mixin breakpoint($breakpoint) {
  @if $breakpoint == "tablet" {
    @media (max-width: 1024px) {
      @content;
    }
  } @else if $breakpoint == "mobile" {
    @media (max-width: 768px) {
      @content;
    }
  } @else if $breakpoint == "desktop" {
    @media (min-width: 1025px) {
      @content;
    }
  }
}

/* -------------------------------------------------------------------------- */
/* Usage */
/* -------------------------------------------------------------------------- */
.element-selector {
  @include breakpoint(desktop) {
    display: block;
  }
}

⇐ All Blog Posts