Font Awesome 4.0新语法

Question

本周我开始使用Font 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. 你的mixin就好了。

2. 该语法使用字符串插值通过变量设置Font 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。