Text Stroke SCSS Mixin (SASS)

stroke.scss

@mixin stroke($width, $color) {
	$shadow: 0 0 0 transparent;
	$i: 0;

	@while ($i < $width) {
		$i: $i + 1;
		$j: 0;

		@while ($j < 2) {
			$j: $j + 1;

			@for $k from 1 through 3 {
				$x: 0;
				$y: 0;

				@if ($k == 1) {
					$x: $i;
				}

				@if ($k == 2) {
					$y: $i;
				}

				@if ($k == 3) {
					$x: $i;
					$y: $i;
				}

				@if ($j != 1) {
					$x: $x * (0 - 1);
					$y: $y * (0 - 1);
				}

				$shadow: #{$shadow}, #{$x}px #{$y}px 0 $color;
			}
		}
	}

	text-shadow: $shadow;

	@media screen and (-webkit-min-device-pixel-ratio: 0) {
		text-shadow: none;
		-webkit-text-stroke: #{$width}px $color;
	}
}

So this is super old but I stumbled across it searching for a solution to this exact problem— figured I'd leave this for people in the same situation.

If I'm not mistaken, @lellimecnar's solution produces waaaaay more CSS than needed (like, exponentially more). Here's what I'm using:

@mixin stroke($width, $color) {
  $shadow: ();
  @for $i from -$width through $width {
    $shadow: append($shadow,#{$width}px #{$i}px $color, comma);
    $shadow: append($shadow,#{-$width}px #{$i}px $color, comma);
    $shadow: append($shadow,#{$i}px #{$width}px $color, comma);
    $shadow: append($shadow,#{$i}px #{-$width}px $color, comma);
  }
  text-shadow: $shadow;
}

Ain't fancy but as far as I can tell the effect is identical and the output is much less verbose.

For anyone, who will search for text-stroke mixin for LESS:

.text-stroke(@width, @color) when (@width > 0) {
    .text-stroke(@width - 1, @color);
    text-shadow+:  @width  @width 0 @color;
    text-shadow+: -@width -@width 0 @color;
    text-shadow+:  @width -@width 0 @color;
    text-shadow+: -@width  @width 0 @color;
}

Usage:

.selector {
    .text-stroke(2px, #fff);
}