Top / Right / Left / Bottom

Below, utility classes to apply inset, top, right, bottom or left property.

@for $value from 0 through 16

Class	Properties
.inset-<value>	inset: #{$value * 0.25}rem;
.inset-x-<value>	left: #{$value * 0.25}rem; right: #{$value * 0.25}rem;
.inset-y-<value>	top: #{$value * 0.25}rem; bottom: #{$value * 0.25}rem;
.top-<value>	top: #{$value * 0.25}rem;
.right-<value>	right: #{$value * 0.25}rem;
.bottom-<value>	bottom: #{$value * 0.25}rem;
.left-<value>	left: #{$value * 0.25}rem;

Example(s)

1

2

3

4

<div class="relative ...">
  <div class="absolute top-6 left-6 ...">1</div>
  <div class="absolute top-6 right-6 ...">2</div>
  <div class="absolute bottom-6 left-6 ...">3</div>
  <div class="absolute bottom-6 right-6 ...">4</div>
</div>