Text Stroke

Type: Mixin

@include text-stroke();

* You can call mixins with or without gls- namespace (e.g. @include gls-text-stroke();).

Text Stroke Sass mixin helps you to add stroke to a text element and style it very easily.

Arguments

Name	Type	Description
`$color`	`color`	Sets the color of a text. The default color value is set to transparent.
`$stroke-color`	`color`	Sets the stroke color of a text. The default stroke color value is black.
`$fallback-color`	`color`	This option is for non-supporting browsers. It will prevent text to disappear entirely in non-supporting browsers. The default value is black.
`$stroke-width`	`number (with unit)`	Sets the width of the stroke. You can pass `thin`, `medium`, `thick` values as a string as well to set the width of the stroke.

* Design Tip: When your stroke color is dark try to make the fallback color the same to make the text look more consistent with the rest of the design.

Examples

Simply call the mixin without passing any argument.

.element {
  @include text-stroke;
}

//CSS Output
.element {
  color: black;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: black;
  -webkit-text-stroke-width: 1px;
}

Text Stroke is Awesome!

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
  );
}

//CSS Output
.element {
  color: cadetblue;
  -webkit-text-fill-color: azure;
  -webkit-text-stroke-color: cadetblue;
  -webkit-text-stroke-width: 1px;
}