Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// ----
// libsass (v3.2.5)
// ----



/**
 * @set_gutter
 * 
 * Gets a list of values and a property (padding or margin) and creates 
 * a property multiplying with specified gutter or static value
 * 
 * @param {list} $list     a list of values for multiplication with specified
 *                         gutter (eg $gutter * specified value) or print as it 
 *                         is if its a fixed value (eg 12px)
 *                         Default for this example is 0 * 6px 1 * 6px etc
 *                         
 * @param {text} $property the property to specify padding or margin
 * 
 */
@mixin set_gutter($list: 0 1, $property: 'padding') {
  
  $values:();
  
  @for $i from 1 through length($list) {
    $values: append($values, get_if_static($gutter, nth($list, $i)) );
  }

  #{$property}: $values;
  
}

/**
 * @get_if_static
 * 
 * Check if value is number or value with string eg 5px 4em etc
 * 
 * if its number do multiplication else give static value
 *  
 * @param  {value} $gutter The value you want to multiple
 * @param  {value} $clue   The value you want to check if its number or something else
 * @return {value}         The value after multiplication or static value
 */
@function get_if_static($gutter, $clue) { 
    @if $clue == 'auto' or unit($clue) != '' {
        @return $clue;
    } @else {
        @return $gutter * $clue;
    }
}

$gutter: 6px;

.alpha{
  @include set_gutter(1, 'margin');
}

$gutter: 3.445%;

.beta{
  @include set_gutter(1 * $gutter + 3 5 3 1, 'padding');
}

$gutter: 5em;

.gamma{
  @include set_gutter(1 auto 3, 'margin');
}

$gutter: 10rem;

.delta{
  @include set_gutter();
}

SassMeister-output.css

/**
 * @set_gutter
 * 
 * Gets a list of values and a property (padding or margin) and creates 
 * a property multiplying with specified gutter or static value
 * 
 * @param {list} $list     a list of values for multiplication with specified
 *                         gutter (eg $gutter * specified value) or print as it 
 *                         is if its a fixed value (eg 12px)
 *                         Default for this example is 0 * 6px 1 * 6px etc
 *                         
 * @param {text} $property the property to specify padding or margin
 * 
 */
/**
 * @get_if_static
 * 
 * Check if value is number or value with string eg 5px 4em etc
 * 
 * if its number do multiplication else give static value
 *  
 * @param  {value} $gutter The value you want to multiple
 * @param  {value} $clue   The value you want to check if its number or something else
 * @return {value}         The value after multiplication or static value
 */
.alpha {
  margin: 6px;
}

.beta {
  padding: 6.445% 17.225% 10.335% 3.445%;
}

.gamma {
  margin: 5em auto 15em;
}

.delta {
  padding: 0rem 10rem;
}