web-dev-qa-db-ja.com

LESS cssマークアップで:hover擬似セレクターを適用できますか?

LESSでは、ホバーしない限り下線を非表示にするリンクのテキストスタイリングに影響を与えるこのような2つのルールを適用できます。

.read-more
{
    a
    {
        text-decoration:none;
    }
    a:hover
    {
        text-decoration:hover;
    }
}

しかし、次のような2つのルールを定義することもできるはずです。

.reverseHover
{
    text-decoration:none;
}

.reverseHover:hover
{
    text-decoration:hover;
}

そして、mixinを使用して両方のルールを取得します。

.read-more{
    a
    {
        .reverseHover;
    }
}

このようなことを明示的に行う必要はありません:

.read-more{
    a{
        .reverseHover;
    }
    a.reverseHover:hover
    {
        .reverseHover;
    }
}

それは可能ですか?

29
cwd

&を使用して親セレクターを参照できます。ミックスインで親セレクターを使用することもできます。ドキュメントは lesscss.org にあります。以下が解決策です。

.reverseHover {
    text-decoration:none;
    &:hover { text-decoration:underline; }
}
.read-more
{
    a
    {
        .reverseHover
    }
}
65
Daniel Moses