web-dev-qa-db-ja.com

変数クラス名の少ないミックスイン

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 ...

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

csstwitter-bootstraplessfont-awesome
23
Peter Sankauskas

しようとしていることに少なくとも2つの問題があります（for LESS> = 1.6 update bellowを参照）：

1）残念ながら、セレクタ補間を使用してミックスインを呼び出すことはできません。

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

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

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

そう

.@{selector-string};

isUnrecognisedLESSコンパイラー。詳細はこちらを参照してください： LESSで参照によってミックスインを呼び出す方法は？

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

例えば：

@foo: test;

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

.bar {
  .test;
}

戻ります：

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

詳細については、こちらをご覧ください。 LESS CSS：生成された。@ {name}クラスをミックスインとして再利用

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

@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);
}

変数を本当に必要とせず、ルールを含めるだけの場合、最善の方法はコンパイル済みCSSをインポートする FontAwesomeのバージョンです（回答 here を参照） ）：

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

そして、LESSミックスインなどのCSSルールを使用するか、適切と思われるセレクターを拡張するだけで、完全に機能するはずです。

更新：

LESS> = 1.6のように、補間セレクターを使用したルールは、ミックスインとしてアクセスできます。したがって、上記の＃2制限フォームは適用されません（ただし、補間を使用してミックスインを動的に呼び出すことはできません）。そのため、インポートされたfont-awesome.less次のようなファイル：

i {
  .fa;
  .fa-lg;
  &:before{
    content: @fa-var-github;
  }
}
51
Martin Turjak