Cool sass' mixins to use - vendor prefixes, shortcuts, responsive typography, flex items and more...

_mixins.scss

@mixin font-size($size){
    font-size: $size + px;
    font-size: (0.0625 * $size) + em;
}

@mixin line-height($size){
    line-height: $size + px;
    line-height: (0.0625 * $size) + em;
}

@mixin animation($args){
    -webkit-animation: $args;
    -moz-animation: $args;
    -ms-animation: $args;
    -o-animation: $args;
    animation: $args;
}

@mixin transition($args) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

@mixin transform($args){
    -webkit-transform: $args;
    -moz-transform: $args;
    -ms-transform: $args;
    -o-transform: $args;
    transform: $args;
}

@mixin translate($x, $y) {
   @include transform(translate($x, $y));
}

@mixin translateX($x) {
   @include transform(translateX($x));
}

@mixin translateY($y) {
   @include transform(translateY($y));
}

@mixin translateZ($z) {
   @include transform(translateY($z));
}

@mixin scale($scale) {
   @include transform(scale($scale));
}

@mixin rotate($deg) {
  @include transform(rotate(#{$deg}deg));
}

@mixin title-shadow($shadowA, $shadowB){
    text-shadow: 1px 1px 0 $shadowA, 3px 3px 0px $shadowB;
}

@mixin prefix($property, $value, $prefixes: ()) {
    @each $prefix in $prefixes {
        #{'-' + $prefix + '-' + $property}: $value;
    }
 
    #{$property}: $value;
}

@mixin multiple-animations($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;
}

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

@mixin display-flex(){
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

_reset.scss

@charset "UTF-8";

html { color:#000; background:#FFF; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin :0; padding: 0; }
table { border-collapse:collapse; border-spacing:0; width: 100%; }
ul, ol{ margin-bottom: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
li { list-style :none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight: normal; }
q:before, q:after { content:''; }
abbr, acronym { border:0; font-variant: normal; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; }
button, select, textarea{ @include prefix(appearance, none, webkit moz ms o); }
input, textarea, select { font-size:100%; }
input::-moz-focus-inner{ border: 0; padding: 0; }
textarea:focus, input:focus{ outline: 0; }
legend { color:#000; }
hr {
    border: none; border-bottom: 1px dashed #d8dce0; visibility: visible; margin: 20px 0; clear: both;
    &.noMargin{ margin-bottom: 0; }
}

h3 small, small {
	font-size: 12px;
	color: #808080;
	font-weight: normal;
}

.clearfix {
    display:block;
    &:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
}
.clear { clear:both; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }