2

私は、スタイルシートから重複を削除するために最初に使用しようとしている LESS 初心者です。次のコードを使用して、1.2.21 未満の (比較的) 複雑なセレクターに変数を追加しようとしています。

@current_house_id: 97;
ul#house-family-menu li#menu-item-@current_house_id {
    background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%;
}

誤解を避けるために、元の css は次のようになります。

ul#house-family-menu li#menu-item-97 {
    background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%;
}

これをlesscでコンパイルすると、エラーが発生します：

構文エラー: 268 行目: [ ( . # * - :: : @media @font-face , { ; got @ after: ul#house-family-menu li#menu-item- のいずれかが必要です

ここや他の場所で提案されているさまざまなエスケープメカニズムを試しましたが、何も機能していないようです。おそらくこれはあまりサポートされていませんか? そうでない場合は、ul#house-family-menu li#menu-item のケースと同等ではないことを行い、アイテムを 1 つずつ適用できると思いますか?

どんな助けでも大歓迎です。

4

1 に答える 1

3

以下：

@b: 3;

(~'.tester@{b}') {
    font-size: 20px;
}

出力:

.tester3 {
    font-size: 20px;
}

あなたの解決策：

@current_house_id: 97;
(~'ul#house-family-menu li#menu-item-@{current_house_id}') {    }

出力:

ul#house-family-menu li#menu-item-97 {    }

編集：

1.4.0-beta はこれを変更したようです ( http://lesscss.org/ ):

(~".myclass_@{index}") { ...

セレクタ補間は非推奨です。代わりにこれを行ってください

.myclass_@{index} { ....

さらに：

セレクターが疑似要素の場合、予想どおり (少なくとも v1.5.0)、セレクター補間を行うことはできません。未解決の問題: https://github.com/less/less.js/issues/1294

回避策:

.myMixin(@whichPseudo) {
  @pseudo-selector: ~":@{whichPseudo}";
    &@{pseudo-selector} {
       background: red;
    }
}

#someEl1 {
    .myMixin(before);
}

#someEl2 {
   .myMixin(after);
}
于 2012-11-07T10:00:25.977 に答える