sass 编译后多加一个空格

【问题标题】：sass add an extra space after compiledsass 编译后多加一个空格
【发布时间】：2019-02-18 02:35:10
【问题描述】：

这是我的 Sass 文件：

$iconValue: '6a9';
.icon-home::before{
    content: '\e#{$iconValue}'
}

编译后我得到了这个 CSS：

.icon-home::before {
  content: "\e 6a9";
}

我怎样才能摆脱多余的空间？

【问题讨论】：

为什么要添加这个#？
你可以在你的变量中直接写\e：$iconValue: '\e6a9';

标签： sass

【解决方案1】：

恭喜你偶然发现了一个关于插值的 Sass 边缘案例；）据我所知，没有一种编译器一致的方式来处理这个问题——但这个修复/破解将在大多数新版本中起作用：

// function to wrap value in quotes (with a leading \) 
@function icon($char){
  @return unquote('"\\#{$char}"');
}


$iconValue: '6a9';
.icon-home::before{
  content: icon(e#{$iconValue});
}


//  you can also add the 'e' to the variable  
//  and make it a little more readable 
$iconValue: 'e6a9';
.icon-home::before{
  content: icon($iconValue);
}

【讨论】：