Question

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

我的元素是一个div（将应用类）和一个内部的跨度＆＃34; hold＆＃34;图标：

<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地图和每个循环：

$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时，显然没有＆＃34;之前＆＃34;检查器中的伪元素，以及编译的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;
   }
 }

同样的事情发生了。

简化案例：

我把它放进了Sassmeister：

$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将字符内部转换为精确的连字/符号/图标。这就是你看到＆＃34;＆＃34 ;;在检查员。它并不意味着Sass无法解析角色。这意味着这些字符在开发人员工具中是不可读的。

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

如果您仍想查看实际的Unicode，那么您可以进行简单的测试并验证它。你只能通过＆＃39; e902＆＃39;并附加＆＃39; \＆＃39;在它面前。我附上了它的片段

@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

Sass map不通过变量传递字符串

简化案例：

1 个答案: