Skip to content

Instantly share code, notes, and snippets.

@nimbupani
Created February 18, 2012 05:02
Show Gist options
  • Save nimbupani/1857529 to your computer and use it in GitHub Desktop.
Save nimbupani/1857529 to your computer and use it in GitHub Desktop.
Sass Snippets
// 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);
}
@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));
}
*/
// Use @include remfallback('margin-left', 2);
@mixin remfallback($property, $value) {
#{$property}: $value * 16px;
#{$property}: #{$value}rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment