_position.scss 1.11 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
@charset "UTF-8";

/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
///
/// @param {Position} $position [relative]
///   A CSS position value
///
/// @param {Arglist} $coordinates [null null null null]
///   List of values that correspond to the 4-value syntax for the edges of a box
///
/// @example scss - Usage
///   .element {
///     @include position(absolute, 0 null null 10em);
///   }
///
/// @example css - CSS Output
///   .element {
///     left: 10em;
///     position: absolute;
///     top: 0;
///   }
///
/// @require {function} is-length
/// @require {function} unpack

@mixin position($position: relative, $coordinates: null null null null) {
27 28 29 30 31 32 33
  @if type-of($position) == list {
    $coordinates: $position;
    $position: relative;
  }

  $coordinates: unpack($coordinates);

34 35 36 37 38 39
  $offsets: (
    top:    nth($coordinates, 1),
    right:  nth($coordinates, 2),
    bottom: nth($coordinates, 3),
    left:   nth($coordinates, 4)
  );
40 41 42

  position: $position;

43 44 45 46
  @each $offset, $value in $offsets {
    @if is-length($value) {
      #{$offset}: $value;
    }
47 48
  }
}