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

Question

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

我的元素是一个div(将应用类)和一个"保存"图标的跨度：

<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>

因此，按照本文中的指导，我正在使用 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时，检查器中显然没有"之前"的伪元素，并且编译的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 检查器中。 这个我根本不明白。

Answer 1

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

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

如果您仍然想查看实际的 Unicode，那么您可以进行简单的测试并验证它。 您只能传递"E902"并在其前面附加"\"。我已经附上了它的片段

@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(""");
}
}
}

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