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

Posted 2023-03-06

【中文标题】Sass 函数返回多个字体 url [关闭]

【英文标题】：Sass function return multiple font urls [closed]

【发布时间】：2016-03-30 00:28:43

【问题描述】：

我创建了条件 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);

【问题讨论】：

我投票决定将其作为印刷错误关闭。您已经演示了如何在声明 $ext 变量时执行此操作，else 内部的返回需要以相同的方式完成。

@shennan 这不是“字符串连接”问题，而是“我忘了我需要引用包含某些字符的字符串”的问题。在 2 个字符串上使用加号运算符会将它们连接起来，说“这不是你的做法”是无稽之谈。

@cimmanon 我认为这仍然被归类为字符串连接问题，在某种意义上，用您自己的话来说，“某些字符”需要以某些方式连接。而且我不认为“忘记”某事有资格投反对票。我们在这里帮助未知的和被遗忘的人。

@shennan 你应该投票关闭它作为***.com/questions/8608498/…的副本

@cimmanon 这就是你投票结束“离题，因为……”的原因吗？为什么不自己投票关闭作为副本？您在原始评论中断言 $ext 变量已正确声明是错误的。您的最后一条评论是 IMO 损害限制。

【参考方案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 循环的声明中使用一个列表就足够了。

【讨论】：

很想知道投反对票的原因...

很好的答案非常有帮助+1

@shennan 您的答案有效。但需要一点点改变。谢谢