5

私はこのLESSファイルを書いていますが、ちょっと行き詰まっています。

コードは次のとおりです。

.flag (@code) {
    (~'.@{code}') {
        + label {
            &:after {
                background-image: url('images/flags/@{code}.png');
            }
        }
    }
}

input[type='radio'] {
    &.flag {
        .flag(us);
    }
}

現在、これにより次のCSSが生成されます（.flagと.usの間のスペースに注意してください）

input[type='radio'].flag .us + label:after {
    background-image: url('images/flags/us.png');
}

ただし、私が探している結果は次のようになります。

input[type='radio'].flag.us + label:after {
    background-image: url('images/flags/us.png');
}

明らかに、どこかにコンビネータ（＆）が必要です。しかし、私は正確にどこを理解することができないようです。私がこれまでに試したすべての結果は、解析エラーまたは望ましくない結果になります。そもそも可能ですか？

どんな助けでもいただければ幸いです。

4

2 に答える 2

7

[回答が遅くなりましたが、ここにある方がよい]

LESS 1.3.1 (2012 年 10 月)の時点で、動的にクラス名を生成する.@{classname}代わりに使用できます。これにより、クラスとこのコードの前にを使用できます。(~"@{classname}")&

レスで:

.flag (@code) {
   &.@{code} {
        + label {
            &:after {
                background-image: url('images/flags/@{code}.png');
            }
        }
    }
}
input[type='radio'] {
    &.flag {
        .flag(us);
    }
}

目的のCSSが生成されます。

input[type='radio'].flag.us + label:after {
  background-image: url('images/flags/us.png');
}
于 2013-04-29T05:29:28.353 に答える
1

エスケープされたセレクターで & を許可するか、このケースに対処する機能の要求がありますが、今のところ回避策はないと思います。見つけたら知りたいです。

于 2012-08-15T21:10:38.300 に答える