Collection of SCSS mixins

color-overlay.scss

// Use @include colorize('image.png', red, 0.5)

@mixin colorize($image, $color, $opacity) {
      background: $color;
      $color: transparentize($color, 1 - $opacity);
      background: -webkit-linear-gradient(left, $color, $color), url($image); 
      background: -moz-linear-gradient(left, $color, $color), url($image); 
      background: -ms-linear-gradient(left, $color, $color), url($image); 
      background: -o-linear-gradient(left, $color, $color), url($image); 
}

modernizr.scss

// =============================================================================
// Modernizr mixin
//
// Table of contents:
// 1. Modernizr mixin
//   1.1 Generate placholder name and selectors
//   1.2 Define placholder and print @content
//   1.3 Define feature selector and extend the placeholder
// 2. Aliases
//   2.1 Yep alias
//   2.2 Nope alias
// 3. Demo
//
// Usage:
// .my-selector {
//   @include yep($features) { ... }
//   @include nope($features) { ... {
// }
//
// =============================================================================

// =============================================================================
// 1. Modernizr mixin
// =============================================================================

@mixin modernizr($features, $supports) {

  $everything-okay: true;

  // Use the 'no-' prefix if checking for unsuported features (e.g. `.no-translate3d`)
  $prefix: if($supports, '', 'no-');

  // Features selector
  // a) create a string if checking for supported features. We'll concatenate class names later on (e.g. `.translate3d.opacity selector`)
  // b) create a list if checking for unsuported features. We'll append the class names later on (e.g. `.no-js selector, .no-translate3d selector`)
  $selector: if($supports, '', (unquote('.no-js')));

  // The placeholder (e.g. `%yep-translate3d` or `%nope-opacity`)
  $placeholder: if($supports, '%yep', '%nope');


  // 1.1 Generate placeholder and selectors
  // =====================================

  @each $feature in $features {

    // Making sure $feature is a string
    @if type-of($feature) != string {

      $everything-okay: false;
      @warn '`#{$feature} is not a string for `modernizr`';

    } @else {

      // Add feature name to the placeholder string (e.g. '%yep' + '-' + 'translate3d' or '%nope' + '-' + 'translate3d')
      $placeholder: $placeholder + '-' + $feature;

      // Define the new selector string (e.g. `.translate3d` or `.no-translate3d`)
      $new-selector: #{'.' + $prefix + $feature};

      // Append the new selector
      // a) to the string if yep (e.g. `.translate3d.opacity`)
      // b) to the list if nope (e.g. `.no-translate3d, .no-opacity`)
      $selector: if($supports, $selector + $new-selector, append($selector, $new-selector, comma));

    }
  }

  @if $everything-okay == true {

    // 1.2 Define the placholder and print @content
    // =====================================

    #{$placeholder} & {
      @content;
    }


    // 1.3 Define feature selector(s) and extend the placeholder
    // =====================================

    @at-root #{$selector} {
      @extend #{$placeholder};
    }

  }
}

// =============================================================================
// 2. Aliases
// =============================================================================

  // 2.1 Yep alias
  // =====================================

  @mixin yep($features) {
    @include modernizr($features, $supports: true) {
      @content;
    }
  }


  // 2.2 Nope alias
  // =====================================

  @mixin nope($features) {
    @include modernizr($features, $supports: false) {
      @content;
    }
  }


// =============================================================================
// 3. Demo
// =============================================================================

// Uncoment the code below and check the generated css output

// .my-selector {

//   @include yep(translate3d opacity) {
//     opacity: 0;
//     transform: translateY(100%);
//   }

//   @include nope(translate3d opacity) {
//     position: relative;
//     top: 100%;
//     display: none;
//   }
// }

multiple-text-shadows.scss

@function blockytextshadows($positions, $shadows) {
  $x: 0;
  $y: 0;
  $x-delta: 0;
  $y-delta: 0;
  $output: null;
  $currentwidth: 1;
  $shadows-count: length($shadows);

  @each $position in $positions {
    @if($position == left){
      $x-delta: -1;
    } @else if $position == right {
      $x-delta: 1;
    } @else if $position == top {
      $y-delta: -1;
    } @else if $position == bottom {
      $y-delta: 1;
    }
  }


  @for $i from 1 through $shadows-count {

    $shadow: nth($shadows, $i);
    $color: nth($shadow, 1);
    $count: nth($shadow, 2);

    @for $i from  $currentwidth to ($currentwidth + $count) {
      $x: $x + $x-delta;
      $y: $y + $y-delta;

      $shadowvalue: #{$color} #{$x}px #{$y}px 1px;

      @if $output == null {
        $output: $shadowvalue;
      } @else {
        $output: join($output, $shadowvalue, comma);
      }
    }

    $currentwidth: $currentwidth + $count;
  }

  @return unquote($output);

}


// Tests & Usage reference
// blockytextshadows(direction, [color number-of-times-to-repeat-color]+);

/* body {
  text-shadow: blockytextshadows(left top, (#fff 1, #000 5));
  text-shadow: blockytextshadows(right top, (#fff 1, #000 5));
  text-shadow: blockytextshadows(top left, (#fff 1, #000 5));
  text-shadow: blockytextshadows(top, (#fff 1, #000 5));
  text-shadow: blockytextshadows(bottom, (#fff 1, #000 5));
  text-shadow: blockytextshadows(left, (#fff 1, #000 5));
  text-shadow: blockytextshadows(right, (#fff 1, #000 5));
  text-shadow: blockytextshadows(right, (#fff 5, #000 2, #ddd 3));
}
*/

remfallback.scss

// Use @include remfallback('margin-left', 2);

@mixin remfallback($property, $value) {
  #{$property}: $value * 16px;
  #{$property}: #{$value}rem;
}