_position.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. @charset "UTF-8";
  2. /// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
  3. ///
  4. /// @param {Position} $position [relative]
  5. /// A CSS position value
  6. ///
  7. /// @param {Arglist} $coordinates [null null null null]
  8. /// List of values that correspond to the 4-value syntax for the edges of a box
  9. ///
  10. /// @example scss - Usage
  11. /// .element {
  12. /// @include position(absolute, 0 null null 10em);
  13. /// }
  14. ///
  15. /// @example css - CSS Output
  16. /// .element {
  17. /// left: 10em;
  18. /// position: absolute;
  19. /// top: 0;
  20. /// }
  21. ///
  22. /// @require {function} is-length
  23. /// @require {function} unpack
  24. @mixin position($position: relative, $coordinates: null null null null) {
  25. @if type-of($position) == list {
  26. $coordinates: $position;
  27. $position: relative;
  28. }
  29. $coordinates: unpack($coordinates);
  30. $offsets: (
  31. top: nth($coordinates, 1),
  32. right: nth($coordinates, 2),
  33. bottom: nth($coordinates, 3),
  34. left: nth($coordinates, 4)
  35. );
  36. position: $position;
  37. @each $offset, $value in $offsets {
  38. @if is-length($value) {
  39. #{$offset}: $value;
  40. }
  41. }
  42. }