9

説明-図像を管理するための多数の「複数の」cssルールを含む.lessシートを用意します。そのようなもの：

.icon { display:inline-block; position:relative; text-indent:-9999em;}
.icon-l.legend { width:24px; height:24px;}
.icon-white.legend{ background:url(@icon_legend_white) no-repeat;}
.icon-l.arrow_left{background-position: -128px -32px;}

このようなルールを次のように適用します。

<i class="icon icon-l icon-color legend arrow_left"></i>

これは、予想どおり、マークアップにアクセスできる場合は正常に機能しますがless、特定の要素にこれらのルールを適用するのに苦労しています。

これが私が働くことを期待するものです：

#something{
  .icon;
  .icon-l.legend;
  .icon-white.legend;
  .icon-l.arrow_left;
}

これはエラーをスローするだけです。

「＆」演算子は次のようなルールを適用できると「信じられます」。

#something{
 .icon;
 .icon-l{&.legend{}};
 .icon-white{&.legend{}};
 .icon-l{&.arrow_left{}};
}

これはエラーをスローしませんが、のルールのみ.iconが適用されます。

誰かが解決策を持っていますか？

アップデート

参考までに-私は多くの異なるユニークなシートのためにいくつかの.lessファイルを一緒にコンパイルしています。本当にうまくいきます。

SublimeText2プラグイン-かなりうまく機能し、ワークフローに非常にうまく統合されます（ファイルを「ビルド」する必要があります）-しかし、このような複数のクラスをレンダリングすることはできませんでした

SimpLess-私がたくさん好きな素晴らしいスタンドアロンですが、私の少ないスタックをコンパイルするときにエラーが発生し続けました-エラーの場所を明確に参照していません

WinLess-このような複数のクラスを正常にコンパイルするだけでなく、すべてのコンパイルのニーズをなんとか完了します。また、そのエラー報告は非常に具体的です。それを勝者にします。

4

2 に答える 2

12

Mixin 名は、複数のクラス名ではなく、単一のクラス名で構成する必要があります。次のような mixin を作成します。

.icon() {
    display: inline-block;
    position: relative;
    text-indent: -9999em;

    &.icon-l.legend {
        width: 24px;
        height: 24px;
    }

    &.icon-white.legend {
        background: url(@icon_legend_white) no-repeat;
    }

    &.icon-l.arrow_left {
        background-position: -128px -32px;
    }
}

そして、次のように使用します。

#something {
    /* "Injecting" .icon mixin into #something */
    .icon;
}
于 2012-11-04T00:15:27.740 に答える
4

コンパイラの問題のようです

あなたの元のアイデアを取る場合：

.icon { display:inline-block; position:relative; text-indent:-9999em;}
.icon-l.legend { width:24px; height:24px;}
.icon-white.legend{ background:url(@icon_legend_white) no-repeat;}
.icon-l.arrow_left{background-position: -128px -32px;}

と

#something{
  .icon;
  .icon-l.legend;
  .icon-white.legend;
  .icon-l.arrow_left;
}

@icon_legend_white次に、変数に何かを割り当てると仮定すると、オンラインの winless コンパイラはそれを次のようにコンパイルします (変数が「somepath」に設定されている場合)。

#something {
  display: inline-block;
  position: relative;
  text-indent: -9999em;
  width: 24px;
  height: 24px;
  background: url("somepath") no-repeat;
  background-position: -128px -32px;
}

したがって、コンパイラがエラーをスローしている場合、コンパイル方法には明らかに違いがあります。解決策は、コンパイラを切り替えるか、使用しているコンパイラをデバッグすることです。

アップデート

winless コンパイラーをさらに実験すると、項目がクラスまたは ID によって定義されている場合にのみ機能することが示されています (これは mixin に有効であると述べられているため、理解できます)。ただし、mixin するというバグがあります。とのいずれかまたは両方を.icon-l.legend単純.icon-l .legendな mixin 呼び出しで実行します。そのため、ミックスインとして呼び出された場合、2 番目のセット (子セレクターにする) の間の「スペース」は無視されます。それは確かにそのコンパイラにとって間違っています。別のオンライン コンパイラはそのバグに悩まされていないようですが、元の試みに従ってコンパイルします。

于 2012-11-05T17:39:17.067 に答える