Skip to content

Instantly share code, notes, and snippets.

@dalgard
Last active December 21, 2015 06:09
Show Gist options
  • Save dalgard/6262098 to your computer and use it in GitHub Desktop.
Save dalgard/6262098 to your computer and use it in GitHub Desktop.
A Sass mixin for setting position the same way that margin and padding are set (`null` is used where no value should be output)
/*
Set position like margin/padding shorthand - rules with null value
are removed from output (standard)
Example:
@include position(0 20px null, fixed);
Output:
position: fixed;
top: 0;
left: 20px;
right: 20px;
*/
@mixin position($coordinates: 0, $position: absolute) {
$length: length($coordinates);
$top: nth($coordinates, 1);
$right: nth($coordinates, 1);
$bottom: nth($coordinates, 1);
$left: nth($coordinates, 1);
@if $length > 1 {
$right: nth($coordinates, 2);
$left: nth($coordinates, 2);
}
@if $length > 2 { $bottom: nth($coordinates, 3); }
@if $length > 3 { $left: nth($coordinates, 4); }
position: $position;
top: $top;
bottom: $bottom;
left: $left;
right: $right;
}
@dalgard
Copy link
Author

dalgard commented Aug 18, 2013

/*
  Example:
    @include position(10px null 0);

  Output:
    position: absolute;
    top: 10px;
    bottom: 0;
*/

@dalgard
Copy link
Author

dalgard commented Feb 18, 2014

/*
  Example:
    @include position;

  Output:
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
*/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment