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-sizer();).
The Sizer Sass mixin helps you size elements with one statement (or two). Size elements or create squares and rectangles very easily.
Arguments
| Name | Type | Description |
|---|---|---|
$width | number (with unit),<br/>string | Sets the width of the selected elements. Accepts a length or a percentage, auto, min-content, max-content, fit-content, stretch, a CSS-wide keyword, var(), a maths function such as calc(), anchor-size() and calc-size(). |
$height | number (with unit),<br/>string | Sets the height of the selected elements. The default value is the $width value. Accepts the same values as $width. |
Examples
Call the mixin to adjust the $width and the $height of an element.
.element{
@include sizer(200px);
}.element {
width: 200px;
height: 200px;
}To assign different values to the width and height properties of an element, do the following:
.element{
@include sizer(500px, 100px);
}.element {
width: 500px;
height: 100px;
}You can pass string values as well!
.element{
@include sizer(400px, auto);
}.element {
width: 400px;
height: auto;
}What it refuses
A width or height the browser drops stops the build. Measured in Chrome 152, that is a word that is not a sizing keyword, a unitless number other than 0, a unit that is not a length such as deg, a negative length, a length in quotes, and two values where one is meant. Until 2.3.1 all of these compiled, and the browser dropped the declaration without a word.
.element {
@include sizer(400px, huge);
}Error: `huge` is not a valid $height for `sizer`: it is not a length or one of: min-content, max-content, fit-content, stretch, -webkit-fill-available, -moz-available, auto. A browser drops the declaration.