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。