css - 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. 您的混音很好。

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。