如何在 SASS 中将间隔单词与 '-' 连接 [使用 @each 循环]

Question

我写了@each循环来生成text-decoration样式，但是我遇到了一个问题。如下图所示。

$args: underline, overline, underline dashed, underline double, underline dotted, underline wavy,
underline overline;
@each $arg in $args {
.text-decoration-#{$arg} {
text-decoration: $arg;
}
}

输出我得到

.text-decoration-underline {
text-decoration: underline;
}
.text-decoration-overline {
text-decoration: overline;
}
.text-decoration-underline dashed {
-webkit-text-decoration: underline dashed;
text-decoration: underline dashed;
}
.text-decoration-underline double {
-webkit-text-decoration: underline double;
text-decoration: underline double;
}
.text-decoration-underline dotted {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
.text-decoration-underline wavy {
-webkit-text-decoration: underline wavy;
text-decoration: underline wavy;
}
.text-decoration-underline overline {
text-decoration: underline overline;
}

OUTPUT I WANT

我想用连字符-代替空格。如果我在参数中添加连字符，它将冲突text-decorationvalue;

.text-decoration-underline {
text-decoration: underline;
}
.text-decoration-overline {
text-decoration: overline;
}
.text-decoration-underline-dashed {
-webkit-text-decoration: underline dashed;
text-decoration: underline dashed;
}
.text-decoration-underline-double {
-webkit-text-decoration: underline double;
text-decoration: underline double;
}
.text-decoration-underline-dotted {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
.text-decoration-underline-wavy {
-webkit-text-decoration: underline wavy;
text-decoration: underline wavy;
}
.text-decoration-underline-overline {
text-decoration: underline overline;
}

Answer 1

您可以创建一个函数来用另一个字符串替换子字符串。你可以在Kitty Giraudel写的这篇CSS-tricks: str-replace文章中找到这样一个函数。

函数是:

@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);

@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}

@return $string;
}

在你的代码中，你可以这样做:

@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);

@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}

@return $string;
}
$args: underline, overline, underline dashed, underline double, underline dotted, underline wavy,
underline overline;
@each $arg in $args {
.text-decoration-#{str-replace(#{$arg}, ' ', '-')} {
text-decoration: str-replace(#{$arg}, ' ', '-');
}
}