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.0Type: Function
validateRatio();
Turns an aspect ratio into a value for the CSS aspect-ratio property.
Arguments
| Name | Type | Description |
|---|---|---|
$ratio | string | number (unitless) | function | Accepts a string such as "16/9" or "16:9", a unitless number, var(), which is returned as it is, or null for the 16/9 default. Width and height in a string must both be whole numbers. |
Examples
The ratio on its own, without the aspect-ratio mixin.
.hero {
aspect-ratio: validateRatio("16:9");
}
.avatar {
aspect-ratio: validateRatio(1);
}.hero {
aspect-ratio: 16 / 9;
}
.avatar {
aspect-ratio: 1;
}What it refuses
Arguments are checked, so a wrong value stops the build with a message instead of quietly producing the wrong CSS.
.hero {
aspect-ratio: validateRatio(16 9);
}Error: `16 9` is not a valid ratio. Pass a string like `"16/9"` or `"16:9"`, a unitless number like `1.77`, or no argument at all for the 16/9 default. You passed a list.