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循环将规则创建为字符串，然后使用插值将其应用于text-shadow属性。

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的大字母大纲描边

1 个答案: