Sass 函数返回多个字体 url [关闭]

Question

我创建了条件 SCSS 函数 用于返回单个或多个字体 url。

我编译的 CSS 看起来没有错误。所以我觉得这个功能运行良好。

但是当按 F5 进行调试时，在控制台中出现错误（在 nodejs 应用程序中）

错误：读取后的值出错

出现错误后，我的网站看起来很糟糕。所以我使用开发人员工具在我的网站中打开了 css 文件，在 css 文件中看起来像这样

之后的值读取错误 1
错误：

后读取值出错

似乎 css 文件没有编译。但是我在本地打开它，然后看起来不错

@font-face {
    font-family: "Sansation_Regular";
    src: url("../fonts/Sansation_Regular.ttf"), url("../fonts/Sansation_Regular.eot"), url("../fonts/Sansation_Regular.woff"), url("../fonts/Sansation_Regular.svg");
    font-weight: normal;
    font-style: normal;
}

如果我的功能有问题帮忙解决。

这里是我的 SCSS 函数

@function urls($url, $multiple) {

    $result: ();

    // base url 
    $fontsBaseURL: '../fonts/';

    @if $multiple == true {

        $ext: "url(" + $fontsBaseURL + $url + ".ttf)" + ",",
              "url(" + $fontsBaseURL + $url + ".eot)" + ",",
              "url(" + $fontsBaseURL + $url + ".woff)" + ",",
              "url(" + $fontsBaseURL + $url + ".svg)";

        @each $item in $ext {
            $result: append($result, $item);
        }

        @return $result;
    } @else {
        @return url($fontsBaseURL + $url + .ttf);
    }
}

还有助手@mixin函数

@mixin Font($family, $src-name, $multiple) {
    $url: urls($src-name, $multiple);

    font-family: $family;   
    src: $url;
    font-weight: normal;
    font-style: normal;
}

这里我调用了函数

@font-face {
    @include Font("Sansation_Regular", "Sansation_Regular", true);
}

Answer 1

尝试将您的 Sass 函数更改为：

@function urls($url, $multiple) {

    $result: ();

    // base url 
    $fontsBaseURL: '../fonts/';

    @if $multiple == true {

        @each $item in ('.ttf', '.eot', 'woff', '.svg') {

            $result: append($result, url('#{$fontsBaseURL}#{$url}#{$item}'), 'comma');
        }

        @return $result;
    } @else {
        @return url('#{$fontsBaseURL}#{$url}.tff');
    }
}

详细解释：

请记住，某些字符串连接最好通过在 Sass 中将变量包装在 #{} 中来完成。取一个像url('path/to/image.png'); 这样的属性值。如果我们要执行以下操作：

body {
  $base: 'path/to/';
  $img: 'image.png';
  background-image: "url('" + $base + $img + "');"
}

输出将是：

body {
  background-image: "url('path/to/image.png');";
}

这在技术上是错误的，因为它被解释为字符串而不是 CSS 属性值。为了做到这一点，我们可能只是尝试声明不带引号的值，并像往常一样使用我们的变量连接：

body {
  $base: 'path/to/';
  $img: 'image.png';
  background-image: url('$base + $img');
}

这再次错了，因为我们的变量是按字面意思打印在 Sass 输出中的：

body {
  background-image: url("$base + $img");
}

我们真正需要的是一种可互换地连接字符串和表达式的方法。这就是#{} 有用的地方。以下是实现上述目标的方法：

body {
  $base: 'path/to/';
  $img: 'image.png';
  background-image: url('#{$base}#{$img}');
}

输出：

p {
  background-image: url("path/to/image.png");
}

顺便说一句，您还不必要地附加了多种字体格式。只需在 @each 循环的声明中使用一个列表就足够了。