Шрифт Awesome 4.0 новый синтаксис

Question

На этой неделе я начал использовать шрифт Awesome, и теперь есть обновление до 4.0. Мои вопросы:

1. Я использовал mixin в старых версиях и только что обновил название. Это нормально и законно и т. Д., Так как я вижу много изменений имени?

   @mixin fa-FontAwesome() { 
       font-family: FontAwesome; 
       font-weight: normal; 
       font-style: normal; 
       text-decoration: inherit; 
       -webkit-font-smoothing: antialiased; 
       *margin-right: .3em; // fixes ie7 issues 
   } 
   

2. Может ли кто-нибудь объяснить используемый теперь синтаксис? Я ценю любую информацию, поскольку я новичок и изучаю SCSS и Font Awesome.

   Например: .#{$fa-css-prefix} использует знак количества и фигурные скобки в имени класса. Я хотел бы понять логику этого.

Answer 1

1. Ваш микс в порядке.

2. Этот синтаксис использует строчную интерполяцию для установки префикса для базового класса шрифта Awesome, который является fa, через переменную.

Например:

$fa-css-prefix: fa; 
.#{$fa-css-prefix} { ... } 

скомпилируется к этому CSS:

.fa { ... } 

, который используется так:

<i class="fa fa-camera-retro"></i> 
.fa { 
    &.fa-camera-retro { 
    } 
} 

В теории, используя переменные, может установить собственный префикс. Это не должно быть fa.

Answer 2

Обновленный сайт FontAwesome объясняет это очень хорошо, just read through the examples page.