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

265

30 мая 2017, 00:54

Этот вопрос касается 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; 
  } 
}

Answer 1

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

Резюмируя: Это нормальное поведение, и по поводу скомпилированных символов беспокоиться не стоит.

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

Answer 2

Это известная бага, можно экранировать, например так:

$icon-like: "e901";
@function unicode($str) {
  @return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"");
}
.icon-like {
  &:before {
    content: unicode($icon-like);
  }
}

А ещё достаточно компактно и изящно получается, если использовать списки, а не отдельные переменные:

$icons: ( 
  bell: "e900",
  like: "e901",
  paceholder: "e902",
  search: "e903",
  star: "e904",
  vision: "e905",
  vision-off: "e906",
  angle-left: "e907",
  angle-right: "e908"
);
@each $name, $str in $icons {
  .icon-#{$name}:before {
    content: unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"");
  }
}