Почему scss так компилирует переменные?

Этот вопрос касается Icomoon в целом.
Не могу разобраться почему scss так компилит символы, но они работают, если в пути к шрифту указан не только шрифт, но и кэш шрифта.
Связанный вопрос: что это за кэш?
$icomoon-font-path: "fonts" !default; $icon-bell: "\e900"; $icon-like: "\e901"; $icon-paceholder: "\e902"; $icon-search: "\e903"; $icon-star: "\e904"; $icon-vision: "\e905"; $icon-vision-off: "\e906"; $icon-angle-left: "\e907"; $icon-angle-right: "\e908"; $icon-arrow-right: "\e909"; $icon-angle-bottom: "\e90a"; $icon-chat-angle-bottom: "\e90b"; $icon-chat-angle-top: "\e90c";
@import "variables"; @font-face { font-family: 'Icomoon'; src: url('#{$icomoon-font-path}/Icomoon.eot?r3waic'); src: url('#{$icomoon-font-path}/Icomoon.eot?r3waic#iefix') format('embedded-opentype'), url('#{$icomoon-font-path}/Icomoon.ttf?r3waic') format('truetype'), url('#{$icomoon-font-path}/Icomoon.woff?r3waic') format('woff'), url('#{$icomoon-font-path}/Icomoon.svg?r3waic#Icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'Icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-bell { &:before { content: $icon-bell; } } .icon-like { &:before { content: $icon-like; } } .icon-paceholder { &:before { content: $icon-paceholder; } } .icon-search { &:before { content: $icon-search; } } .icon-star { &:before { content: $icon-star; } } .icon-vision { &:before { content: $icon-vision; } } .icon-vision-off { &:before { content: $icon-vision-off; } } .icon-angle-left { &:before { content: $icon-angle-left; } } .icon-angle-right { &:before { content: $icon-angle-right; } } .icon-arrow-right { &:before { content: $icon-arrow-right; } } .icon-angle-bottom { &:before { content: $icon-angle-bottom; } } .icon-chat-angle-bottom { &:before { content: $icon-chat-angle-bottom; } } .icon-chat-angle-top { &:before { content: $icon-chat-angle-top; } }

Ответ

Sass при компиляции utf-8 юникод файлов - переводит подобные вашим последовательности в юникод-символы. Почему вы видите квадраты вместо символов в редакторе? Потому что в вашем моноширинном шрифте эти символы не отрисованы. Но они отрисованы в шрифте Icomoon, который подключается на сайте, и там в итоге символы корректно отображаются.
Резюмируя: Это нормальное поведение, и по поводу скомпилированных символов беспокоиться не стоит.
Однако, если вдруг ваши файлы хранятся в ASCII-кодировке - Sass все равно будет компилировать символы в них, хотя по логике - не должен. На гитхабе уже 3 года висит открытый тикет по теме. Можно почитать, но разумный способ решения - перевести свои стили в utf-8-кодировку.