Sass Margin/Padding Mixin

index.html

<div class="container">
  <img src="http://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg" />
<h1>Sass Mixin for Margin/Padding and all your Frustrating space needs</h1>

<div class="box default">
  <p>Default:<br>  @include space();</p>
</div>
<div class="box padding-example">
  <p>Padding Example:<br>@include space(padding, all, $large);</p>
</div>
<div class="box margin-example">
  <p>Margin Example:<br>@include space(margin, all, $small);</p>
</div>
  <div class="box hover-example">
  <p>hover Example:<br>@include space(margin, all, $small);</p>
</div>
</div>

QwQmZb.markdown

QwQmZb

A Pen by ezos86 on CodePen.

License.

Sass-Margin-Padding-Mixin.markdown

Sass Margin/Padding Mixin

This Sass mixin will help you eliminate frustrating padding-left, etc with a formula based padding/margin to help keep spacing also consistency.

A Pen by ezos86 on CodePen.

License.

style.scss

@import "compass/css3";
$xs : 10px;
$small : 25px;
$medium : 50px;
$large : 75px;
$xlarge : 100px;
$xxlarge: 150px;

@mixin space($type:margin, $direction:all, $amount:$medium){
	@if $type == padding {
		@if $direction == all{
			padding: $amount;
		} @else if $direction == top {
			padding-top:$amount
		} @else if $direction == left {
			padding-left:$amount
		} @else if $direction == right {
			padding-right:$amount
		} @else {
			padding-bottom:$amount
		}
	} @else {
		@if $direction == all{
			margin: $amount;
		} @else if $direction == top {
			margin-top:$amount
		} @else if $direction == left {
			margin-left:$amount
		} @else if $direction == right {
			margin-right:$amount
		} @else {
			margin-bottom:$amount
		}
	}
}

html{
  background-color:#333;
}
.container{
  margin:0 auto;
  display:block;
  text-align:center;
  img{
    width:20%;
    @include space(margin, top, $small);
  }
}
h1{
  font-size:42px;
  text-align:center;
  width:80%;
  margin-left:10%;
  line-height:50px;
  color:#fff;
}

.box{
  background-color:#eee;
  display:inline-block;
  height:100px;
  width:200px;
  p{
    line-height:20px;
  }
}

//Start of box Examples
.default{
    @include space();
}
.padding-example{
  @include space(padding, all, $large);
}
.margin-example{
  @include space(margin, top, $small);
}
.hover-example{
  @include space(margin, top, $large);
  @include transition();
  &:hover{
    @include space(padding, bottom, $large);
  }
}