带 sass 的大字母轮廓笔划

Question

我一直在使用文本阴影技巧，即使用大文本阴影来为字母轮廓创建更大笔画宽度的错觉。它按我的需要工作，但我最近开始使用 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 循环创建多个规则的说明，但还没有看到如何创建单个规则的多个属性。如果可能的话，有人可以给我举个例子吗？或者指出我一直很难找到的文档？或者，如果不可能，请告诉我，以便我可以安心地继续前进。

Answer 1

您可以使用 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};

带 sass 的大字母轮廓笔划

large letter outline stroke with sass

css

for-loop

sass

control-structure

while-loop