sass编译后添加额外的空间

Question

这是我的Sass文件：

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

编译后，我得到了这个CSS：

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

如何摆脱多余的空间？

Answer 1

恭喜，您刚刚在插值方面偶然发现了Sass边缘情况；） 据我所知，没有一种一致的编译器来处理此问题–但是此修复程序/ hack将在大多数较新的版本中起作用：

// 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);
}