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

#css #css3 #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;
  }
}





    

Ответы

Ответ 1

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

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


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


Ответ 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("\"");
  }
}