Useful SASS Mixins: padding, margin, line-height, etc. I'll add more

mixins.scss

$base-font-size:   16px!default;
$base-line-height: 24px!defaut;





/**
 * FUNCTION: REM
 * ------------------------------------------------------------------------------
 * Changes a given PX value to REM. This is not mixin, but it's required by some 
 * mixins below to change pixels to rems.
 * 
 * usage: rem(24px);           returns 1.5rem if the base font-size is 16px.
 */
@function rem($px, $base-unit: $base-font-size) {
	@if ($px == 0 or $px == unquote("auto")) {
		@return $px;
	}
	@else {
		@return ($px / $base-unit) * 1rem;
	}
}





/**
 * PADDING
 * ------------------------------------------------------------------------------
 * usage: @include padding(24px);
 * usage: @include padding((12px, 24px));
 * usage: @include padding((0, 24px, 24px));
 * usage: @include padding((24px, 24px, 36px 0px));    you can add px preffix to zero values if you want, the mixin doesn't care ;)
 * usage: @include padding(24px, bottom);
 */
@mixin padding($size, $side: false, $base-unit: $base-font-size){
	@if $side != false {
		padding-#{$side}: $size;
		padding-#{$side}: rem($size);
	}

	@else if length($size) == 2  {
		padding: nth($size, 1) nth($size, 2);
		padding: rem(nth($size, 1)) rem(nth($size, 2));
	}

	@else if length($size) == 3  {
		padding: nth($size, 1) nth($size, 2) nth($size, 3);
		padding: rem(nth($size, 1)) rem(nth($size, 2)) rem(nth($size, 3));
	}

	@else if length($size) == 4  {
		padding: nth($size, 1) nth($size, 2) nth($size, 3) nth($size, 4);
		padding: rem(nth($size, 1)) rem(nth($size, 2)) rem(nth($size, 3)) rem(nth($size, 4));
	}

	@else {
		padding: $size;
		padding: rem($size);
	}
}





/**
 * MARGINS
 * ------------------------------------------------------------------------------
 * usage: @include margin(24px);
 * usage: @include margin((12px, 24px));
 * usage: @include margin((0, 24px, 24px));
 * usage: @include margin((24px, 24px, 24px -24px));  Note the minus (-) sign
 * usage: @include margin(24px, bottom);
 */
@mixin margin($size, $side: false, $base-unit: $base-font-size){
	@if $side != false {
		margin-#{$side}: $size;
		margin-#{$side}: rem($size);
	}
	
	@else if length($size) == 2  {
		margin: nth($size, 1) nth($size, 2);
		margin: rem(nth($size, 1)) rem(nth($size, 2));
	}

	@else if length($size) == 3  {
		margin: nth($size, 1) nth($size, 2) nth($size, 3);
		margin: rem(nth($size, 1)) rem(nth($size, 2)) rem(nth($size, 3));
	}

	@else if length($size) == 4  {
		margin: nth($size, 1) nth($size, 2) nth($size, 3) nth($size, 4);
		margin: rem(nth($size, 1)) rem(nth($size, 2)) rem(nth($size, 3)) rem(nth($size, 4));
	}

	@else {
		margin: $size;
		margin: rem($size);
	}
}





/**
 * FONT-SIZE WITH LINE-HEIGHT
 * ------------------------------------------------------------------------------
 * usage: @include font-size(24px);
 * 
 * As seen in https://github.com/csswizardry/inuit.css
 */
@mixin font-size($font-size, $line-height:true){
	font-size:$font-size;
	font-size:($font-size / $base-font-size) * 1rem;
	@if $line-height == true{
		line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
	}
}





/**
 * LINE-HEIGHT
 * ------------------------------------------------------------------------------
 * usage: @include line-height(24px);   Prints 1.5 if the base font size is 16px
 */
@mixin line-height($size, $base-unit: $base-font-size) {
	line-height: ($size / $base-unit) * 1;
}