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

$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);
}

compiled CSS

.eg-absolute-container {
  position: relative;
}

.eg-absolute-1 {
  position: absolute;
  top: 0;
  left: 0;
}

.eg-absolute-2 {
  position: absolute;
  right: 0.5em;
  bottom: 1em;
}

Result

Top left

Bottom right