23

私は Font Awesome 4.0.0 を使用しており、LESS で次のようなことをしたいと考えています。

.btn-github {
  .btn;
  .btn-primary;
  margin-left: 3em;

  i {
    .@{fa-css-prefix};
    .@{fa-css-prefix}-github;
    .@{fa-css-prefix}-lg;
    margin-right: 1em;
  }
}

それはエラーでコンパイルされません:

ParseError: Unrecognised input in - on line ...

これを達成することは可能ですか？それは確かに私にとって美しいボタンになるでしょう.

4

1 に答える 1

52

あなたがしようとしていることには、少なくとも 2 つの問題があります ( LESS >=1.6 の場合は、以下の更新を参照してください)。

1) 残念ながら、セレクタ補間を使用して mixin を呼び出すことはできません。

セレクタ補間を使用すると、LESS は構造が次の形式であると想定します。

.@{selector-string} { property:value; }

(補間されたセレクターは、補間の前後に静的文字列を持つこともできます)

それで

.@{selector-string};

LESS コンパイラによって認識されません。詳細はこちら: LESS で参照によって mixin を呼び出すにはどうすればよいですか?

2) 補間されたセレクターを持つルールセットは CSS 出力に直接出力され、LESS 実行で再利用できる mixin としては存在しません。

例えば：

@foo: test;

.@{foo} {
  length: 20px;
}

.bar {
  .test;
}

戻ります：

    Name error: .test is undefined
    .bar {  .test;}

詳細はこちら: LESS CSS: Reuse generated .@{name} class as a mixin

あなたの問題の可能な解決策は、フォントの素晴らしいルールをある種の再利用可能なミックスインとして再定義することです（補間を使用せずに）。このようなもの：

@fa-var-github: "\f09b";

.fa-mixin() {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-mixin-lg() {
  font-size: (4em / 3);
  line-height: (3em / 4);
  vertical-align: -15%;
}
.fa-mixin-icon(@icon){
  @var: "fa-var-@{icon}";
  &:before { content: @@var; }
}
i {
  .fa-mixin;
  .fa-mixin-lg;
  .fa-mixin-icon(github);
}

変数が本当に必要なく、単にルールを含めたい場合は、FontAwesomeのコンパイル済み CSS バージョンをインポートするのが最善の方法です (こちらの回答を参照してください)。

@import (less) 'font-awesome.css';

次に、LESS ミックスインなどの CSS ルールを使用するか、必要に応じてセレクターを拡張するだけで、完全に機能するはずです。

アップデート：

LESS >= 1.6以降、補間されたセレクターを使用するルールは mixinとしてアクセスできます ... したがって、上記の 2 番目の制限形式は適用されなくなりました (ただし、補間を使用して mixin を動的に呼び出すことはできません)。font-awesome.lessしたがって、次のように、インポートされたファイルから LESS ミックスインと変数を簡単に呼び出すことができます。

i {
  .fa;
  .fa-lg;
  &:before{
    content: @fa-var-github;
  }
}
于 2013-10-26T05:54:09.890 に答える