Gerillass: Position Sass Mixin

Position

Type: Mixin

@include position();

* You can call mixins with or without the gls- namespace (e.g. @include gls-position();).

The Position Sass mixin provides a one-line method to quickly set both the position and the offset properties of a selected element.

Name	Type	Description
`$position`	string	Sets the `position` property of the selected elements. Accepts the CSS values `static`, `relative`, `fixed`, `absolute`, and `sticky`. The default value is `absolute`.
`$offsets`	list	Accepts a list of values to set the offsets of the box edges. It uses the CSS shorthand method. The default value is `0`.

To learn more about CSS shorthand properties, check out the links at the end of this page.

Call the mixin without passing any arguments to see the default values that it generates.

Sass

.element{
  @include position;
}

CSS

.element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Result

Now let's set the position value to fixed and leave the offset values as they are.

Sass

.element{
  @include position(fixed);
}

CSS

.element {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Result

Changing the offset values is easy. Note that multiple offset values must be separated by a space.

Sass

.element{
  @include position(fixed, 10px 10px 10px 50px);
}

CSS

.element {
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 50px;
}

Result

You can use the null value to skip positioning particular edges of an element.

Sass

.element{
  @include position(absolute, null 16px 16px 16px);
}

CSS

.element {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
}

Result