Last active
April 12, 2016 17:47
-
-
Save thybzi/f9de78fae7cc8c6af51004de1cca878e to your computer and use it in GitHub Desktop.
position.styl v2.0 :: see http://codepen.io/thybzi/pen/eZGrRW/?editors=0100
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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