1

次のコード:

.positionBase (@name,@size: 16px,@position: 0) {
    [disabled] .icon.@{name}, .disabled .icon.@{name}, .disabled.icon.@{name} {
        background-position: @position*@size -@size;
    }

    .icon.@{name} {
        background-position: @position*@size 0;
    }

    .icon.@{name}.dark {
        background-position: @position*@size -2*@size;
    }

    .icon.@{name}.dark:hover, a:hover .icon.@{name}.dark, button:hover .icon.@{name}.dark, .button:hover .icon.@{name}.dark, .interactable:hover .icon.@{name}.dark {
        background-position: @position*@size -3*@size;
    }
}

* {
    .positionBase(testing,16px,0)
}

私が期待するように生成します:

* [disabled] .icon.testing,
* .disabled .icon.testing,
* .disabled.icon.testing {
  background-position: 0px -16px;
}
* .icon.testing {
  background-position: 0px 0;
}
* .icon.testing.dark {
  background-position: 0px -32px;
}
* .icon.testing.dark:hover,
* a:hover .icon.testing.dark,
* button:hover .icon.testing.dark,
* .button:hover .icon.testing.dark,
* .interactable:hover .icon.testing.dark {
  background-position: 0px -48px;
}

*接頭辞を削除して、接頭辞なしでセレクターを使用するにはどうすればよいですか?

動作しないもの:

.positionBase(testing,16px,0)

* {
    .positionBase(testing,16px,0)
}

{
    .positionBase(testing,16px,0)
}

私のGoogle fooは弱いです。これが可能だと思わせるものは何も見つかりませんでした。その場合、*プレフィックスを使用したいのですが、それはパフォーマンスにも非常に悪いです。何か案は?

ありがとう

4

1 に答える 1

2

うまく.positionBase(testing,16px,0);いくはずです(最後にセミコロンを必ず含めてください!省略した場合、コンパイルの失敗が少なくなる可能性があります)

http://lesstester.com/でテストしたところ、問題なく動作しました。

.positionBase (@name,@size: 16px,@position: 0) {
    [disabled] .icon.@{name}, .disabled .icon.@{name}, .disabled.icon.@{name} {
        background-position: @position*@size -@size;
    }

    .icon.@{name} {
        background-position: @position*@size 0;
    }

    .icon.@{name}.dark {
        background-position: @position*@size -2*@size;
    }

    .icon.@{name}.dark:hover, a:hover .icon.@{name}.dark, button:hover .icon.@{name}.dark, .button:hover .icon.@{name}.dark, .interactable:hover .icon.@{name}.dark {
        background-position: @position*@size -3*@size;
    }
}

.positionBase(testing,16px,0);
于 2015-06-16T20:52:21.470 に答える