Sass映射不通过变量传递字符串

Question

我正在尝试创建一个 sass 映射以将图标类应用于嵌套元素。

我的元素是一个 div（将应用该类）和一个内部“保存”图标的 span：

<div class="pboi-tour_adventure">
   <span></span>
</div>

实际上，如果重要的话，它是 AngularJS ng-for 的一部分：

<div class="icon-sample" ng-repeat="icon in maps.icons">
    <div class="{{icon}}">
       <span></span>
    </div>
</div>

所以，在guidance in this article 之后，我使用的是 sass 映射和 each 循环：

$poi-icons: (
  tour_adventure: "\e96c",
  tour_beach: "\e96d",
  tour_tourist_attractions: "\e96e",
  tour_tourist_infomation: "\e96f"
);

@each $name, $icon in $poi-icons {
.pboi-#{$name} {
  span::before {
    content: $icon;
  }
 }
}

我的问题是，当我检查html时，检查器中显然没有“before”伪元素，编译后的css是

.pboi-tour_adventure span::before { content: ""; }

当我期望它是：

.pboi-tour_adventure span::before { content: "\e96c"; }

当然，因为这个，图标不起作用。

注意：即使我将其展平以匹配文章中的示例：

  @each $name, $icon in $poi-icons {
   .pboi-#{$name}::before {
     content: $icon;
   }
 }

同样的事情也会发生。

简化案例：

我把这个放到萨斯迈斯特：

$foo: 'bar';

$icons: (
 busi_ATM: 'foo',
 busi_bank: $foo,
 busi_business: '\e902'
); 

@each $name, $icon in $icons {
 .pboi-#{$name}:before {
    content: $icon;
   }
}

我明白了

.pboi-busi_ATM:before {
   content: "foo";
 }

.pboi-busi_bank:before {
  content: "bar";
}

.pboi-busi_business:before {
   content: "";
 }

为什么 Sass 会通过前 2 个字符串而不是 '\e902'？

另外，更令人困惑的是，当我使用循环时，:before 会出现在编译的 CSS 文件中，但不会出现在浏览器的 Web Inspector 中。这个我完全不明白。

Answer 1

Sass 在内部将字符转换为精确的连字/符号/图标。这就是您看到“”的原因；在检查员中。这并不意味着 Sass 无法解析字符。这意味着这些字符在开发人员工具中不可读。

如果由于某种原因您在输出中看到相同的框，则说明您没有正确设置字体，或者您的字体仍在尝试加载。您可以在开发工具中检查计算的字形以验证加载的字体。

如果您仍然想看到实际的 Unicode，那么您可以做一个简单的测试并验证它。您只能传递“e902”并在其前面附加“\”。我已经为它附上了sn-p

@charset 'UTF-8';
$poi-icons: (
  tour_adventure: "e96c",
  tour_beach: "e96d",
  tour_tourist_attractions: "e96e",
  tour_tourist_infomation: "e96f"
);
@each $name, $icon in $poi-icons {

.pboi-#{$name} {
  span::before {
    content: unquote("\"")+unquote(str-insert($icon,"\\", 1))+unquote("\"");
  }
 }
}

参考 sass 问题： https://github.com/sass/sass/issues/1395