带 sass 的大字母轮廓笔划

large letter outline stroke with sass

我一直在使用文本阴影技巧,即使用大文本阴影来为字母轮廓创建更大笔画宽度的错觉。它按我的需要工作,但我最近开始使用 sass 并且想知道是否可以转换我当前的 css 规则:

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

使用 sass 中的 for 循环控件可以缩短一些内容。

到目前为止,我已经看到有关如何使用 for 循环创建多个规则的说明,但还没有看到如何创建单个规则的多个属性。如果可能的话,有人可以给我举个例子吗?或者指出我一直很难找到的文档?或者,如果不可能,请告诉我,以便我可以安心地继续前进。

您可以使用 for 循环将规则创建为字符串,然后使用插值将其应用于文本阴影 属性。

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