Sass position helpers
I lifted this mixin from Bourbon a long time ago (code is from V4 or even earlier) and I still use it regularly in almost every project.
// Unpacking function used in position() mixin
@function unpack($shorthand) {
@if length($shorthand)==1 {
@return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
}
@else if length($shorthand)==2 {
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
}
@else if length($shorthand)==3 {
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
}
@else {
@return $shorthand;
}
}
// Bourbon.io positioning mixin
@mixin position($position: relative, $coordinates: null null null null) {
@if type-of($position) == list {
$coordinates: $position;
$position: relative;
}
position: $position;
$coordinates: unpack($coordinates);
$top: nth($coordinates, 1);
$right: nth($coordinates, 2);
$bottom: nth($coordinates, 3);
$left: nth($coordinates, 4);
@if (not ($top == null)) {
top: $top;
}
@if (not ($right == null)) {
right: $right;
}
@if (not ($bottom == null)) {
bottom: $bottom;
}
@if (not ($left == null)) {
left: $left;
}
}
// Positioning helper mixins
@mixin absolute($args) {
@include position(absolute, $args);
}
@mixin fixed($args) {
@include position(fixed, $args);
}
@mixin relative($args) {
@include position(relative, $args);
}
The main position
mixin takes two arguments: CSS position value and coordinates (no commas between them). Coordinates can be listed in shorthand format and unpack
function is used to properly map them. Those marked as null
get omitted from the final output.
Other mixins are the ones I actually use in code, depending on the position I want to achieve. I find myself using absolute
almost exclusively.
ΒΆ Alternative
This is alternative absolute
helper I found recently. It requires passing all direction values (this time comma separated) so instead of null
I have to use auto
so all values always get outputted. But I like the simplicity.
@mixin absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
position: absolute;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}