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-resizable();).
The Resizable Sass mixin helps you make an element resizable in both the horizontal and vertical directions.
Note: This property doesn't work on inline elements, or on block elements whose overflow property is set to visible.
Arguments
| Name | Type | Description |
|---|---|---|
$direction | string | Sets the direction of the resize property. Accepts the values both, horizontal, vertical, none, and the logical block and inline, or auto. The default value is both. |
$overflow | string | Sets the overflow property: one or two of visible, hidden, clip, scroll, auto and overlay, such as hidden auto. The default value is auto. Both arguments take a CSS-wide keyword on its own and var(), and null leaves the declaration out. |
Examples
A tiny icon will appear in the lower right corner of the box below. Grab it and try resizing the box.
Simply call the mixin without passing any arguments.
.element{
@include resizable;
}.element {
resize: both;
overflow: auto;
max-width: 100%;
}What it refuses
A value the browser drops stops the build. Measured in Chrome 152, that is a word outside the keywords above, three overflow values, and a CSS-wide keyword beside another value. Until 2.3.1 each compiled into a declaration that did nothing, and a quoted keyword kept its quotes, which the browser drops too; it is now written without them.
.element {
@include resizable(both, inherit auto);
}Error: `inherit auto` is not a valid $overflow for `resizable`: `inherit` only works as the whole value. A browser drops the declaration.