Sass技术问题：移除inspect()生成字符串引号并正确拼接路径

问题分析 #

get-filename()函数通过inspect()返回的是包含双引号的字符串（实际值为'"foo.jpg"'），直接拼接或使用unquote()无法移除内容里的引号——因为unquote()仅能去掉Sass字符串本身的外层引号，对字符串内部的引号无效。

解决方案 #

使用Sass的str-replace()函数，将返回字符串中的双引号替换为空后再进行拼接：

// 不可修改：
@function get-filename() {
    $filename: inspect("foo.jpg");
    @return $filename;
}

// 修正后的代码：
$filename-with-quotes: get-filename();
$clean-filename: str-replace($filename-with-quotes, "\"", "");
$url: "path/" + $clean-filename; 
body {
    background-image: url($url);
}

补充说明 #

• str-replace($string, $search, $replace)会遍历目标字符串，将所有匹配的$search内容替换为$replace，这里通过转义符\"匹配字符串内部的双引号，将其替换为空字符串。
• 最终生成的CSS会正确输出url('path/foo.jpg')，符合预期。

如果你的Sass版本较低不支持原生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;
}

内容的提问来源于stack exchange，提问作者Giraphi