Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0* 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.
Arguments
| Name | Type | Description |
|---|---|---|
$position | string | Sets the position property of the selected elements. Accepts the CSS values static, relative, fixed, absolute, and sticky, in any case, a vendor keyword such as -webkit-sticky, a CSS-wide keyword, or var(). The default value is absolute, and null leaves position out. A quoted keyword is written without its quotes. |
$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. Use null in any position to leave that edge out. Each is a length, a percentage, auto, a CSS-wide keyword, var(), a maths function, anchor() or anchor-size(). |
$logical (false) | boolean | Pass true for offsets that follow the writing direction. The shorthand order stays the same, and each value goes to the logical twin of its edge: inset-block-start, inset-inline-end, inset-block-end and inset-inline-start. The same choice triangle and border-radius offer with their logical names. null is read as false. |
To learn more about CSS shorthand properties, check out the links at the end of this page.
Examples
Call the mixin without passing any arguments to see the default values that it generates.
.element{
@include position;
}.element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Now let's set the position value to fixed and leave the offset values as they are.
.element{
@include position(fixed);
}.element {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Changing the offset values is easy. Note that multiple offset values must be separated by a space.
.element{
@include position(fixed, 10px 10px 10px 50px);
}.element {
position: fixed;
top: 10px;
right: 10px;
bottom: 10px;
left: 50px;
}You can use the null value to skip positioning particular edges of an element.
.element{
@include position(absolute, null 16px 16px 16px);
}.element {
position: absolute;
right: 16px;
bottom: 16px;
left: 16px;
}Logical offsets follow the writing direction. 1rem goes to the start of the line: the left of a left-to-right box and the right of a right-to-left one, from the same rule. Measured in Chrome 152, a physical left stayed on the left in both boxes.
.badge {
@include position(absolute, 0.75rem auto auto 0.75rem, $logical: true);
}.badge {
position: absolute;
inset-block-start: 0.75rem;
inset-inline-end: auto;
inset-block-end: auto;
inset-inline-start: 0.75rem;
}What it refuses
A $position the browser drops stops the build. Until 2.3.1 any word went into the declaration as it was, and measured in Chrome 152, position: huge is dropped, so the offsets land on a box that was never positioned. So was a quoted keyword: position("sticky") wrote position: "sticky", which now comes out without its quotes.
.element {
@include position(huge, 0);
}Error: `huge` is not a valid $position for `position`: it is not one of: static, relative, absolute, fixed, sticky. A browser drops the declaration.An offset the browser drops stops the build too. Measured in Chrome 152, top, left and the inset-* properties drop a word other than auto or a CSS-wide keyword, a unitless number other than 0, a unit that is not a length, a colour, an image and a quoted length. Until 2.3.1 these compiled, some with a warning and some without, and the warning also fired for working values such as AUTO and revert-layer; it is gone.
.element {
@include position(absolute, 0 10deg);
}Error: `10deg` is not a valid offset for `position`: `deg` is not a length unit. A browser drops the declaration.