Throughout this time I have written some Sass mixins that are useful to me in the projects I do, they have helped me not to repeat the same code over and over again, to write stylesheets faster and above all to maintain a more uniform code.

And although many are specific to my own projects, some of them are useful for any project, that's why I have decided to publish them with the hope that they can help more people.

Media queries

This is without a doubt the mixin I use the most as it helps me to write responsive styles faster.

First we must define some variables with the breakpoints we want to use, in my case I usually use 5 breakpoints with well defined values but you can adjust them to your needs or even add or remove some.

/* Media queries breakpoints */
$break-small: 35.5rem; // >= 568px @ 16px
$break-medium: 48rem; // >= 768px @ 16px
$break-large: 64rem; // >= 1024px @ 16px
$break-extra-large: 80rem; // >= 1280px @ 16px
$break-largest: 90rem; // >= 1440px @ 16px

Please note that in order to use the following mixin you must first define the previous variables as the mixin makes use of them and if you modify them you must also make the corresponding changes in the mixin.

It is also important to note that this mixin is created with the aim of making your styles mobile first.

/* Media query mixin */
@mixin respond-to( $condition ) {
  @if $condition == 'initialize' { @media only screen and (min-width: 1px) { @content; } }
  @if $condition == 'small' { @media only screen and (min-width: $break-small) { @content; } }
  @if $condition == 'medium' { @media only screen and (min-width: $break-medium) { @content; } }
  @if $condition == 'large' { @media only screen and (min-width: $break-large) { @content; } }
  @if $condition == 'extra-large' { @media only screen and (min-width: $break-extra-large) { @content; } }
  @if $condition == 'largest' { @media only screen and (min-width: $break-largest) { @content; } }
}

Below you can see a small example of how to use the mixin. First you write the styles that correspond to mobile devices and then making use of the mixin you define the styles that correspond to larger screens.

// Usage example
.title {
  font-size: 1.750rem;
  @include respond-to('medium') {
    font-size: 2.250rem;
  }
}

Box shadows

/* Box shadow mixin */
@mixin bs($bsval: 0 0 0.83em #333, $due: 0 0 0 transparent) {
  -moz-box-shadow: $bsval, $due;
  -webkit-box-shadow: $bsval, $due;
  -o-box-shadow: $bsval, $due;
  box-shadow: $bsval, $due;
}

// Usage example
.card {
  @include bs(0 4px 10px #f3f3f3);
}

Transitions

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

// Usage example
.button {
  @include transition(all .25s cubic-bezier(.02,.01,.47,1));
}

Transforms

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

// Usage example
.menu {
  @include transform(translate3d(-100%, 0, 0));
}

Animations

To work with animations you will need two mixins. The first is to define the name of the animation, define its duration, its delay and other parameters. The second is to create the animation as such with the help of @keyframes.

/* Animation mixin */
@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};
    @if $i < $max {
      $animations: #{$animations + ", "};
    }
  }

  -webkit-animation: $animations;
  -moz-animation: $animations;
  -o-animation: $animations;
  animation: $animations;
}
/* Keyframes mixin */
@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}
// Usage example
.submenu {
  @include animation('openSubmenuAnimation 0.3s both');
  @include keyframes(openSubmenuAnimation) {
    from {
      @include opacity(0);
      @include transform(translate3d(0, 10%, 0));
    }
    to {
      @include opacity(1);
      @include transform(translate3d(0, 0, 0));
    }
  }
}

Truncate text

/* Ellipsis mixin */
@mixin ellipsis($lines: 1, $font-size: 16px, $line-height: 1.3, $width: 100%) {
  $height: ($font-size*$line-height*$lines) + ($line-height * 1.6);

  display: block;
  width: $width;
  min-height: $height;
  max-height: $height; // Fallback for non-webkit
  font-size: $font-size;
  line-height: $line-height;
  white-space: nowrap;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Usage example
.tag {
  @include ellipsis(1, 14px, 1.3, calc(100% - 40px));
}

If you want to start using all these mixins you can copy or download the entire stylesheet from this Gist.

Enjoy!