Sass Snippets

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); 
}

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;
}