Skip to content

Instantly share code, notes, and snippets.

@nathggns
Created June 24, 2012 17:40
Show Gist options
  • Save nathggns/2984123 to your computer and use it in GitHub Desktop.
Save nathggns/2984123 to your computer and use it in GitHub Desktop.
Text Stroke SCSS Mixin (SASS)
@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;
}
}
@erickskrauch
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment