Mixins

A handy collection of SCSS tools

Use these mixins with @include {mixin-name}

Ellipsis

Shorten a line with ...

					@mixin ellipsis(){
					  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
					}
				

Ulreset

Reset your ul's and ol's

					@mixin ulreset() {
					  margin: 0; padding: 0; list-style: none;
					}
				

Opacity

Opacity with fallback for older browsers

					@mixin opacity($params) {
						filter: alpha(opacity=$params);
						-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$params)";
						opacity: $params * 0.01;
					}
				

Transform mixin

Enable multiple transforms with fallback through autoprefixer.

					@mixin transform($transforms) {
						transform: $transforms;
					}
					@mixin rotate ($deg) {
					  @include transform(rotate(#{$deg}deg));
					}
					@mixin scale($scale) {
						 @include transform(scale($scale));
					}
					@mixin translate ($x, $y) {
					   @include transform(translate($x, $y));
					}
					@mixin translateX ($x) {
						@include transform(translateX($x));
					}
					@mixin translateY ($y) {
						@include transform(translateY($y));
					}
					@mixin skew ($x, $y) {
					   @include transform(skew(#{$x}deg, #{$y}deg));
					}