SCSS
@function calc-stroke($thick,$color) {
$output : "";
$thick : $thick - 1;
@for $i from 0 through $thick {
@if($i == $thick){
$output : $output + (#{$thick}px #{$i}px #{$color}) + ", ";
$output : $output + (-#{$thick}px #{$i}px #{$color}) + ", ";
$output : $output + (#{$thick}px -#{$i}px #{$color});
}
@else {
$output : $output + (#{$thick}px #{$i}px #{$color}) + ", ";
$output : $output + (-#{$thick}px #{$i}px #{$color}) + ", ";
$output : $output + (#{$thick}px -#{$i}px #{$color}) + ", ";
}
}
@return $output;
}
@mixin text-stroke($thick,$color) {
-webkit-text-stroke: #{$thick - 1}px $color;
/* If we weren't using text-shadow, we'd set a fallback color
and use this to set color instead
-webkit-text-fill-color: white; */
text-shadow: unquote(calc-stroke($thick,$color));
}
p {
font-size: 35px;
color: #fff;
@include text-stroke(3,#333);
}
