Gerillass
v2.1.0Type: Function
validateRatio();
Turns an aspect ratio into a value for the CSS aspect-ratio property.
Arguments
| Name | Type | Description |
|---|---|---|
$ratio | string | number (unitless) | Accepts a string such as "16/9" or "16:9", a unitless number, or null for the 16/9 default. |
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.