large letter outline stroke with sass

Question

I have been using the text shadow trick of using a large text shadow to create the illusion of a larger stroke width for a letter outline. It works as is for my needs but I recently started using sass and was wondering if it was possible to convert my current css rules:

#title {
top:10px;
left:-30px;
color:white;
transform: scale(.8,1);
position: absolute;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
text-shadow: 0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%),
0 0 10px hsl(216,100%,50%); }

into something much shorter using the for loop controls in sass.

so far I've seen instructions on how to use the for loop to create multiple rules, but not yet to create multiple properties of a single rule. If it is possible, could someone give me an example? Or point me to documentation that I have been having a hard time finding? Or if it is not possible please let me know, so that I can move on in peace.

That seems insane... but the more I think about how to achieve the same effect, maybe there is no alternative. Sure you don't want an image? Have you checked out `-webkit-text-stroke`? Not identical, but way less rendering! — arbuthnott, Aug 28 '17 at 22:34
I have tried that, but it didn't achieve what I was looking for. I haven't seen any performance problems with this yet, or other ways of getting it done, but I plan on using more detailed visual aspects in the future so a picture will probably replace it eventually. for the moment its easier to do this then spend time animating detailed pictures for every title screen. Thank you for your input though! I'm always looking for new and better ways. — Marcus Ruddick, Aug 29 '17 at 00:03

score 0 · Accepted Answer · answered Aug 28 '17 at 23:29

0

You can use the for loop to create your rule as a string, then use interpolation to apply it to the text-shadow property.

codepen

$text-shadow: '';
@for $i from 1 through 20 {
  $text-shadow: $text-shadow + if($i == 1, '', ', ') + '0 0 10px hsl(216,100%,50%)';
}
text-shadow: #{$text-shadow};

answered Aug 28 '17 at 23:29

Colby Sargent

341
2
6

it works, too bad there's no way to do it without fudging around with strings, but I guess it's an unusual task. Thanks for your answer! – Marcus Ruddick Aug 29 '17 at 00:11

large letter outline stroke with sass

1 Answers1