A basic SCSS mixin for indenting and outdenting content

indent-outdent.scss

// Amount of grid columns
$columns = 12;

// Indenting blocks
/*
Parameters:
$side    (string) 'left' or 'right' - use an empty string to indent in both directions (default)
$offset  (number) amount of columns the content will be indented
*/
@mixin indent($side: "", $offset: 1) {
  @if $side == "" {
    padding-left: ($offset / $columns) * 100%;
    padding-right: ($offset / $columns) * 100%;
  } @else {
    padding-#{$side}: ($offset / $columns) * 100%;
  }
}

// Outdenting blocks
/*
Parameters:
$side    (string) 'left' or 'right' - use an empty string to outdent in both directions (default)
$offset  (number) amount of columns the content will be outdented
*/
@mixin outdent($side: "", $offset: 1) {
  @if $side == "" {
    margin-left: -($offset / ($columns - (2 * $offset))) * 100%;
    margin-right: -($offset / ($columns - (2 * $offset))) * 100%;
  } @else {
    margin-#{$side}: -($offset / ($columns - (2 * $offset))) * 100%;
  }
}

// Basic usage
.indented {
  @include indent();

  &--left {
    @include indent("left")
  }

  &--right {
    @include indent("right")
  }
}
.outdented {
  @include outdent();

  &--left {
    @include outdent("left");
  }

  &--right {
    @include outdent("right");
  }
}

See a basic example of this on JSFiddle