positioning: absolute

view source

Absolutely position an element and assign its coordinates, all in one line of SCSS.

use-name
scut-absolute
type
mixin, with default-values placeholder
arguments
  1. $coordinates
    default
    0 n n 0

    See information about scut-coords.

You'll save years of your life, and probably lose weight.

example

HTML

<div class="eg-absolute-container">  <div class="eg-absolute eg-absolute-1">Top left</div>
  <div class="eg-absolute eg-absolute-2">Bottom right</div>
</div>

SCSS

.eg-absolute-container {
  position: relative;
}
.eg-absolute-1 {
  @include scut-absolute;
  // or @extend %scut-absolute;
  }
.eg-absolute-2 {
  @include scut-absolute(n 0.5em 1em n);
}

Result

Top left
Bottom right