2

私は現在、CSSの構造化を支援するためにsassを使用しています。以下に示す些細なこと。

.container {
    .list {
        .selected {
            background-image : url('highlighted.png');
        }
    }
}

ただし、modernizr（http://modernizr.com/docs/）も使用しており、可能な場合はCSS3を利用したいと考えています。この例では、の可用性をテストし、背景画像ではなくborder-radius使用します。border-radiusしたがって、要素にborderradiusクラスが存在するかどうかを確認する必要があります。htmlある種の裏返しを使用してこれを達成することは可能ですか？.borderradiusまたは、クラスでコードをもう一度繰り返す必要がありますか？最終結果は次のようになります：

.container {
    .list {
        .selected {
            background-image : url('highlighted.png');
        }
    }
}

.borderradius .container {
    .list {
        .selected {
            background : yellow;
            border-radius : 10px;
        }
    }
}

私には、これは大規模なプロジェクトで維持するのが面倒で難しいように見えます。誰かがこれを達成するためのよりエレガントな方法を持っていますか？

4

1 に答える 1

12

次のように、アンパサンド（＆）を使用して親セレクターを参照できます。

.container {
    .list {
        .selected {
            background-image : url('highlighted.png');
            .borderradius & {
                background : yellow;
                border-radius : 10px;
            }
        }
    }
}

これは次のようにコンパイルされます：

.container .list .selected { 
    background-image : url('highlighted.png');
}

.borderradius .container .list .selected {
    background : yellow;
    border-radius : 10px;
}

これがどれほど役立つかについてのより詳細な説明については、この記事、またはこの記事をチェックしてください。

...繰り返しセレクターの代わりにセレクター宣言の最後に末尾のアンパサンド（＆）文字を配置し、座ってSassの素晴らしさを楽しむことができます

于 2013-02-05T11:37:01.847 に答える