Skip to content

Instantly share code, notes, and snippets.

@thybzi
Last active April 12, 2016 17:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thybzi/f9de78fae7cc8c6af51004de1cca878e to your computer and use it in GitHub Desktop.
Save thybzi/f9de78fae7cc8c6af51004de1cca878e to your computer and use it in GitHub Desktop.
/**
* Set `position` property, as well as `top`, `right`, `bottom`, `left` properties
* After the first argument, accepts 1 to 4 additional args, ordered and working "as for padding"
* To skip any of values, set it to `null`
* @mixin
* @example position(absolute, 5px, 10px, 0, auto)
* @example position(absolute, 5px, null, 0, auto)
* @example position(fixed, 5px, 10px)
* @example position(fixed, 0)
*/
position()
$arglen = length(arguments)
if $arglen >= 1
position: arguments[0]
$sides = $arglen - 1
if $sides == 1
$top = $right = $bottom = $left = arguments[1]
else if $sides == 2
$top = $bottom = arguments[1]
$right = $left = arguments[2]
else if $sides == 3
$top = arguments[1]
$right = $left = arguments[2]
$bottom = arguments[3]
else if $sides >= 4
$top = arguments[1]
$right = arguments[2]
$bottom = arguments[3]
$left = arguments[4]
if $left is a 'unit' or $left == 'auto'
left: $left
if $right is a 'unit' or $right == 'auto'
right: $right
if $top is a 'unit' or $top == 'auto'
top: $top
if $bottom is a 'unit' or $bottom == 'auto'
bottom: $bottom
/**
* Set `position: absolute`, as well as `top`, `right`, `bottom`, `left` properties
* Accepts 1 to 4 arguments, ordered and working "as for padding"
* To skip any of values, set it to `null`
* @mixin
* @example absolute(5px, 10px, 0, auto)
* @example absolute(5px, null, 0, auto)
* @example absolute(5px, 10px)
* @example absolute(0)
*/
absolute()
unshift(arguments, absolute)
position(arguments)
/**
* @mixin Set `position: fixed`, as well as `top`, `right`, `bottom`, `left` properties
* @see absolute()
*/
fixed()
unshift(arguments, fixed)
position(arguments)
/**
* @mixin Set `position: relative`, as well as `top`, `right`, `bottom`, `left` properties
* @see absolute()
*/
relative()
unshift(arguments, relative)
position(arguments)
//// USAGE ////
.direct
position(absolute, 1px, 2px, 3px, 4px)
.direct-3sides
position(relative, 1px, 2px, 3px)
.direct-3sides-null
position(fixed, 1px, 2px, 3px, null)
.direct-3sides-null-transparent
position: fixed 1px 2px 3px null
.absolute-0
absolute(0)
.absolute-0-transparent
absolute: 0
.fixed-2sides-transparent
fixed: 4px 10px
.fixed-3sides
fixed(4px, 10px, 30px)
.relative-bottomonly-transparent
relative: null null 4px null
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment