A handy collection of SCSS tools
Use these mixins with @include {mixin-name}
Shorten a line with ...
@mixin ellipsis(){ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
Reset your ul's and ol's
@mixin ulreset() { margin: 0; padding: 0; list-style: none; }
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; }
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)); }