Question

我为返回单个或多个字体网址创建了条件 SCSS功能。

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

但按F5进行调试时，在控制台中发出错误（在nodejs app中）

错误：在
之后读取值时出错

错误后我的网站看起来很糟糕。所以我使用开发人员工具在我的网站中打开了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循环声明中的列表就足够了。

Sass函数返回多个字体网址

1 个答案: