49 lines
1.1 KiB
SCSS
49 lines
1.1 KiB
SCSS
|
@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) {
|
|||
|
|
@if type-of($position) == list {
|
|||
|
|
$coordinates: $position;
|
|||
|
|
$position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$coordinates: unpack($coordinates);
|
|||
|
|
|
|||
|
|
$offsets: (
|
|||
|
|
top: nth($coordinates, 1),
|
|||
|
|
right: nth($coordinates, 2),
|
|||
|
|
bottom: nth($coordinates, 3),
|
|||
|
|
left: nth($coordinates, 4)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
position: $position;
|
|||
|
|
|
|||
|
|
@each $offset, $value in $offsets {
|
|||
|
|
@if is-length($value) {
|
|||
|
|
#{$offset}: $value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|