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.
You can use the for loop to create your rule as a string, then use interpolation to apply it to the text-shadow property.
$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};