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-text-stroke();).
The Text Stroke Sass mixin helps you add a stroke to a text element and style it very easily.
Arguments
| Name | Type | Description |
|---|---|---|
$color | color | Sets the color of the text. The default value is transparent. Each of the three colours takes a colour, currentColor, a system colour, a function such as var() or light-dark(), or a CSS-wide keyword, and null leaves its declaration out. |
$stroke-color | color | Sets the stroke color of the text. The default value is black. |
$fallback-color | color | This option is for browsers that do not support text stroke. It prevents the text from disappearing entirely in those browsers. The default value is black. |
$stroke-width | number (with unit) | Sets the width of the stroke. You can also pass the string values thin, medium, and thick, a CSS-wide keyword, var() or a maths function. Not a percentage or a negative width. |
Design Tip: When your stroke color is dark, try making the fallback color the same, so the text looks more consistent with the rest of the design.
Examples
Simply call the mixin without passing any arguments.
.element {
@include text-stroke;
}.element {
color: black;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}Now pass some arguments to make the text look sexier!
.element {
@include text-stroke(
$color: azure,
$stroke-color: cadetblue,
$fallback-color: cadetblue,
$stroke-width: 1px
);
}.element {
color: cadetblue;
-webkit-text-fill-color: azure;
-webkit-text-stroke-color: cadetblue;
-webkit-text-stroke-width: 1px;
}What it refuses
A colour the browser drops stops the build. Until 2.3.1 each argument was written as it was, and measured in Chrome 152 a word that is not a colour, a quoted colour, a length and two colours side by side are dropped, which here can leave the text transparent with no stroke.
.element {
@include text-stroke(black, "red");
}Error: `"red"` is not a valid $color for `text-stroke`: a colour in quotes is text, not a colour. A browser drops the declaration. Pass a colour such as `black`, `currentColor`, or a function such as `var(--stroke)`.A stroke width the browser drops stops the build as well: measured in Chrome 152, a percentage, a negative width and a word other than thin, medium, thick or a CSS-wide keyword. Until 2.3.1 these compiled.
.element {
@include text-stroke(black, transparent, red, -1px);
}Error: `-1px` is not a valid $stroke-width for `text-stroke`: a length below zero does not work here. A browser drops the declaration.