relative

view source

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

use-name

scut-relative

type

mixin only

arguments

$coordinates

default

n n n n

See information about scut-coords.

example

SCSS

.eg-relative-1 {
  @include scut-relative(0.2em 0.2em n n);
}
.eg-relative-2 {
  @include scut-relative(a a 1em n);
}
.eg-relative-3 {
  @include scut-relative(n n -0.5em 0.2em);
}

compiled CSS

.eg-relative-1 {
  position: relative;
  top: 0.2em;
  right: 0.2em;
}

.eg-relative-2 {
  position: relative;
  top: auto;
  right: auto;
  bottom: 1em;
}

.eg-relative-3 {
  position: relative;
  bottom: -0.5em;
  left: 0.2em;
}

Result

Some of these words are positioned in strange ways.