使用Font Awesome包装在自己的css规则中

Question

我使用根主题框架开发wordpress主题，我通常使用这样的Bootstrap glyphicon：

.icon-mobile-application {
    .glyphicon;
    .glyphicon-asterisk;
}

现在我想以类似的方式使用font-awesome，所以我在font-awesome.less中包含app.less并将其包装在我自己的css规则中，如下所示：

.icon-web-development {
    .@{fa-css-prefix};
    .@{fa-css-prefix}-code;
}

但是当我尝试编译它时返回错误：

>> Parser error in app.less
>>       93.     .icon-web-development {
>>       94.         .@{fa-css-prefix};
>>       95.         .@{fa-css-prefix}-code;
Warning:  Use --force to continue.

我也试试：

.icon-web-development {
    .fa;
    .fa-code;
}

显示错误：Fatal error: .fa is undefined。我在这里缺少什么？