Some handy SCSS mixins

rad mixins

// Peter Hrynkow
// Grid mixin
[class*=span-] {
    float: left;
    position: relative;
}
@mixin grid ($name, $columns, $padding-x, $padding-y) {
    $column-width: 100% / $columns;
    @for $i from 1 through $columns {
        .span-#{$name}-#{$i} {
            width: ($column-width * $i);
        }
        .span-#{$name}-#{$i} .inner {
            padding: $padding-y * ($columns / $i) $padding-x * ($columns / $i);
        }
    }
}



@function strip-unit($num) {
    @return $num / ($num * 0 + 1);
}

@mixin rem($property, $values) {
    $max: length($values);
    $pxValues: '';
    $remValues: '';

    @for $i from 1 through $max {
        $value: strip-unit(nth($values, $i));
        $pxValues: #{$pxValues + $value*16}px;

        @if $i < $max {
            $pxValues: #{$pxValues + " "};
        }
    } 

    @for $i from 1 through $max {
        $value: strip-unit(nth($values, $i));
        $remValues: #{$remValues + $value}rem;

        @if $i < $max {
            $remValues: #{$remValues + " "};
        }
    } 
    
    #{$property}: $pxValues; 
    #{$property}: $remValues; 
}


@mixin keyframes( $animationName )
{
    @-webkit-keyframes $animationName {
        @content;
    }
    @-moz-keyframes $animationName {
        @content;
    }
    @-o-keyframes $animationName {
        @content;
    }
    @keyframes $animationName {
        @content;
    }
}