Some useful SASS Mixins

Alright, time to post something useful as lately I have become lazy 🙂 . Here are a couple of useful SASS mixins that I always use on the websites that I design.

Set width x height of an element

@mixin size($width, $height: $width) { 
	width: $width; 
	height: $height; 
}

Clearfix

@mixin clearfix() { 
	&:before, &:after { 
		content: ""; 
		display: table; 
	} 
	&:after { 
		clear: both; 
	} 
}

Absolute Position

@mixin abs-pos($top: auto, $right: auto, $bottom: auto, $left: auto) { 
	top: $top; 
	right: $right; 
	bottom: $bottom; 
	left: $left; 
	position: absolute; 
}

Border Radius

@mixin border-radius($radius) { 
	-webkit-border-radius: $radius; 
	-moz-border-radius: $radius; 
	-ms-border-radius: $radius; 
	-o-border-radius: $radius; 
	border-radius: $radius; 
	background-clip: padding-box; 
}

Background Gradient

@mixin background-gradient($startColor: #3c3c3c, $endColor: #999999) {
	background-color: $startColor;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from($startColor),
		to($endColor)
	);
	background-image: -webkit-linear-gradient(top, $startColor, $endColor);
	background-image: -moz-linear-gradient(top, $startColor, $endColor);
	background-image: -ms-linear-gradient(top, $startColor, $endColor);
	background-image: -o-linear-gradient(top, $startColor, $endColor);
	background-image: linear-gradient(top, $startColor, $endColor);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}

Box Shadow

@mixin box-shadow(
	$x: 2px,
	$y: 2px,
	$blur: 5px,
	$color: rgba(0, 0, 0, 0.4),
	$inset: ''
) {
	@if ($inset != '') {
		-webkit-box-shadow: $inset $x $y $blur $color;
		-moz-box-shadow: $inset $x $y $blur $color;
		box-shadow: $inset $x $y $blur $color;
	} @else {
		-webkit-box-shadow: $x $y $blur $color;
		-moz-box-shadow: $x $y $blur $color;
		box-shadow: $x $y $blur $color;
	}
}

Text Shadow

@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) { 
	text-shadow: $x $y $blur $color; 
}

Transition Animation

@mixin transition($what: all, $length: 1s, $easing: ease-in-out) {
	-moz-transition: $what $length $easing;
	-o-transition: $what $length $easing;
	-webkit-transition: $what $length $easing;
	-ms-transition: $what $length $easing;
	transition: $what $length $easing;
}

Hope you guys like it. Don’t forget to share it with others and leave comments.