5

LESS CSSを使用して、ネストされたクラス内からdomツリーのさらに上のクラスにアクセスできるようにしたい。例を参照してください。

HTML：

<html class="svg">
 <body>
  <div class="content">
    <div class="container">
      <div class="logo"></div>
    </div>
 </body>
</html>

以下：

.container {
  .logo {
      background:url(/images/ws-logo.gif);
  }
}

次のような別のルールを作成する代わりに、.logoネストされたルール内からhtmlタグの.svgクラスをターゲットにして、物事を整頓したいと思います。

.svg { 
  .container {
    .logo {
        background:url(/images/logo.svg);
    }
  }
}

したがって、理想的には次のようなものです。

 .container {
    .logo {
        background:url(/images/logo.gif);

        (some-symbol).svg {
           background:url(/images/svg-logo.svg);
        }
    }
 }

私はsvgサポートを検出するためにmodernizrを使用しています。

これが可能かどうか誰か知っていますか？または何か推奨事項がありますか？

4

2 に答える 2

7

はい！（アップデート）

ここでこれをテストしたところ、うまくいきました！

    .container { 
        .logo { 
            background:url(/images/logo.gif);
            .svg & {
                background:url(/images/svg-logo.svg);
            } 
        } 
    }
于 2012-07-17T12:32:16.290 に答える
2

別のクラスを親に追加するためにパスを「戻る」ことができないため、これは不可能です。代わりに、別のルールを書くだけです:

.svg .container .logo,
/* or perhaps even simpler, however be aware of rule specificity*/
.svg .logo{
        background:url(/images/logo.svg);
}

大したことではありませんよね？

完全を期すために: -symbol を介して実際の要素を参照できます&。これは、疑似クラス/要素、または現在の要素の追加クラスをターゲットにする場合に意味があります。

.container {
     .logo {
         /* styles for ".container .logo" */
     }
     &:hover .logo{
         /* styles for ".container .logo"
            The hover however is bound to the .container element
            equals the following selector: .container:hover .logo */
     }
}
于 2012-07-17T12:51:54.097 に答える