My personal flavored mixin additions to Compass

SASSy.scss

// Description	: My personal flavored mixin additions to Compass
// Author	: Yoeran Luteijn
// Email	: contact@yoeran.nl
// Twitter	: @yoeran



//
// Resize anything
@mixin resizable($direction) {
	resize: $direction; // Options: horizontal, vertical, both
	overflow: auto; // Safari fix
}


//
// RGBA with fallback
@mixin rgba($property, $red, $green, $blue, $alpha) {
	#{$property}: rgb(#{$red}, #{$green}, #{$blue}); /* [1] */
	#{$property}: rgba(#{$red}, #{$green}, #{$blue}, #{$alpha}); /* [2] */
}

//
// Mediaqueries
@mixin respond-to( $breakpoints... ) {
	@each $breakpoint in $breakpoints {
		@if $breakpoint == portrait {
			@media screen and (max-width: 320px) { @content; }
		}
		@else if $breakpoint == landscape {
			@media screen and (min-width: 321px) and (max-width: 768px) { @content; }
		}
		@else if $breakpoint == small {
			@media screen and (min-width: 1px) and (max-width: 768px) { @content; }
		}
		@else if $breakpoint == medium {
			@media screen and (min-width: 768px) and (max-width: 1280px) { @content; }
		}
		@else if $breakpoint == large {
			@media screen and (min-width: 1280px) { @content; }
		}
	}
}

//
// SVG with fallback
$asset-path: '/assets/' !default;
@mixin vector-bg-with-fallback($name) {
	background-image: url('#{$asset-path}#{$name}.png');
	background-image: none, url('#{$asset-path}#{$name}.svg');
}


//
// Add vendor prefixes to everything!
@mixin vendor-prefix($name, $argument) {
	-webkit-#{$name}: $argument;
	-moz-#{$name}: $argument;
	-ms-#{$name}: $argument;
	-o-#{$name}: $argument;
	#{$name}: $argument;
}

// Set animation
@mixin animation( $animation ){
	-webkit-animation: $animation;
	-moz-animation: $animation;
	-o-animation: $animation;
	animation: $animation;
}


//
// Set keyframes
// usage: @include keyframes( animationName ){ 50% { background: blue; } }
@mixin keyframes( $animationName )
{
	@-webkit-keyframes $animationName {
		@content;
	}
	@-moz-keyframes $animationName {
		@content;
	}
	@-o-keyframes $animationName {
		@content;
	}
	@keyframes $animationName {
		@content;
	}
}


//
// Get sprite (also works with mediaqueries)
// Gist: https://gist.github.com/3166895 
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) {

	$sprite-image: sprite-file($map, $sprite);
	$sprite-map: sprite-url($map);
	$sprite-position: sprite-position($map, $sprite);

	background: $sprite-map $sprite-position $repeat;

	@if $height == true {
		$sprite-height: image-height($sprite-image);
		height: $sprite-height;
	}

	@if $width == true {
		$sprite-width: image-width($sprite-image);
		width: $sprite-width;
	}
}


//
// Micro Clearfix
// http://nicolasgallagher.com/micro-clearfix-hack/
%clearfix {
	*zoom: 1;
	&:after {
		content: '';
		display: table;
		line-height: 0;
		clear: both;
	}
}


//
// Image replacement
%ir {
	display: block;
	text-indent: -9999%;
	font-size: 1px;
	color: rgba(0,0,0,0);
}


//
// Ratio aware scaling
// Example usage: .ratio-16-9 { @extend %ratioAware; padding-bottom: (9/16) * 100%; }
%ratioAware {
	position: relative;
	height: 0;
	padding-top: 1px;
	
	embed,
	video,
	object,
	iframe {
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
	}
}


//
// @include triangle within a pseudo element and add positioning properties (ie. top, left)
// $direction: up, down, left, right
@mixin triangle($direction, $size: 6px, $color: #222){
	content: '';
	display: block;
	position: absolute;
	height: 0; width: 0;
	@if ($direction == 'up'){
		border-bottom: $size solid $color;
		border-left: 1/2*$size solid transparent;
		border-right: 1/2*$size solid transparent;
	}
	@else if ($direction == 'down'){
		border-top: $size solid $color;
		border-left: 1/2*$size solid transparent;
		border-right: 1/2*$size solid transparent;
	}
	@else if ($direction == 'left'){
		border-top: 1/2*$size solid transparent;
		border-bottom: 1/2*$size solid transparent;
		border-right: $size solid $color;
	}
	@else if ($direction == 'right'){
		border-top: 1/2*$size solid transparent;
		border-bottom: 1/2*$size solid transparent;
		border-left: $size solid $color;
	}
}


//
// Vertical align dynamic height elements 
@mixin verticalAlign(){
	&:before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		height: 100%; width: .1px;
	}
}


//
// Truncate text with ellipsis
@mixin truncateText($overflow: ellipsis){
  overflow: hidden;
  white-space: nowrap;
  text-overflow: $overflow; // values are: clip, ellipsis, or a string
}

//
// Simple CSS tooltip
// Requires triangle mixin
@mixin css_tooltip($content: attr(data-tooltip), $direction: top) {
	position: relative;
	&:before, &:after {
		display: none;
		z-index: 98;
	}
	&:hover {
		&:after { // for text bubble
			content: $content;
			display: block;
			position: absolute;
			height: 12px; // (makes total height including padding 22px)
			padding: 6px;
			font-size: 12px;
			white-space: nowrap;
			color: #fff;
			@include text-shadow(1px 1px #000);
			background-color: #222;
		}
		
		@if ($direction == 'top'){
			&:before {
				@include triangle(down, 6px, #222);
				top: -6px; margin-top: 0;
				left: 47%;
			}
			
			&:after {
				top: -28px;
				left: 47%; margin-left: -20px;
			}
		}
		@else if ($direction == 'bottom'){
			&:before {
				@include triangle(up, 6px, #222);
				top: auto; margin-top: 0;
				bottom: -6px;
				left: 47%;
			}
			&:after {
				bottom: -28px;
				left: 47%; margin-left: -20px;
			}
		}
	}
}