Cacher is the code snippet organizer for pro developers

.btn {
  display: block;
  color: white;
  background-color: green;
  padding-top: 12px;
  padding-bottom: 12px;
}
.btn--tiny {
  padding-right: 6px;
  padding-left: 6px;
}
.btn--small {
  padding-right: 12px;
  padding-left: 12px;
}
.btn--large {
  padding-right: 48px;
  padding-left: 48px;
}
.btn--huge {
  padding-right: 96px;
  padding-left: 96px;
}

.box {
  display: block;
  padding: 24px;
}
.box--tiny {
  padding: 6px;
}
.box--small {
  padding: 12px;
}
.box--large {
  padding: 48px;
}
.box--huge {
  padding: 96px;
}

.page-title {
  line-height: 24px;
}
.page-title--tiny {
  line-height: 6px;
}
.page-title--small {
  line-height: 12px;
}
.page-title--large {
  line-height: 48px;
}
.page-title--huge {
  line-height: 96px;
}

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$spacing-unit: 24px;

$spacing-unit-tiny:  round(0.25 * $spacing-unit);
$spacing-unit-small: round(0.5  * $spacing-unit);
$spacing-unit-large: round(2    * $spacing-unit);
$spacing-unit-huge:  round(4    * $spacing-unit);

@mixin sizes($properties...) {

  &--tiny {
    @each $property in $properties {
      #{$property}: $spacing-unit-tiny;
    }
  }
  
  &--small {
    @each $property in $properties {
      #{$property}: $spacing-unit-small;
    }
  }
  
  &--large {
    @each $property in $properties {
      #{$property}: $spacing-unit-large;
    }
  }
  
  &--huge {
    @each $property in $properties {
      #{$property}: $spacing-unit-huge;
    }
  }

}

.btn {
  display: block;
  color: white;
  background-color: green;
  padding-top:    $spacing-unit-small;
  padding-bottom: $spacing-unit-small;
  @include sizes(padding-right, padding-left);
}

.box {
  display: block;
  padding: $spacing-unit;
  @include sizes(padding);
}

.page-title {
  line-height: $spacing-unit;
  @include sizes(line-height);
}