6

articleとsectionHTML5タグで使用されるクラスがあります。

家で：

<article class="exit">
    <a href="exit.php">
        <figure class="box">
            <img src="assets/img/projects/exit-m.jpg" alt="">
            <figcaption>…&lt;/figcaption>
        </figure>
    </a>
</article>

プロジェクトページ：

<section class="page project exit">
    <div class="corner nw intro">
        <figure class="box">
            <img src="assets/img/projects/exit.jpg" alt="">
            <figcaption>…&lt;/figcaption>
        </figure>
   </div>
   …

クラスexitを持つ各要素には、figure内部にHTML5要素があります。Lessでは、このコードを使用してやりたいことを実行します。

article.exit{width:260px; height:200px; top:315px; left:505px;
    figure{background-color:@exit-bg;}
    .box:hover{.perspective-box(se, 10, @exit-shadow);}
}
section.exit{
    .box:hover{.perspective-box(nw, 10, @exit-shadow);}
    .intro figcaption:hover{background:@exit-hover;}
}

しかし、それがanarticleかsection！かを指定する必要があります。私はそのようなクラスをたくさん持っています、そしてそれは少し面倒です…</ p>

このようなことをするための解決策はありますか？とてもかっこいいです…</p> 

.exit{
    &article{
        width:260px; height:200px; top:315px; left:505px;
        figure{background-color:@exit-bg;}
        .box:hover{.perspective-box(se, 10, @exit-shadow);}
    }
    &section{
        .box:hover{.perspective-box(nw, 10, @exit-shadow);}
        .intro figcaption:hover{background:@exit-hover;}
    }
}
4

2 に答える 2

16

exitこれらの2つのルールがクラス内で共通のスタイルを共有しない場合、これらの2つのルールをネストしようとしてもあまり意味がありません。

ただし、それでもネストする場合は、セレクターでは、要素名が常に他の単純なセレクターの前にあることに注意してください。要素名の後にafterを配置して、&機能するかどうかを確認してください。

.exit{
    article&{
        width:260px; height:200px; top:315px; left:505px;
        figure{background-color:@exit-bg;}
        .box:hover{.perspective-box(se, 10, @exit-shadow);}
    }
    section&{
        .box:hover{.perspective-box(nw, 10, @exit-shadow);}
        .intro figcaption:hover{background:@exit-hover;}
    }
}
于 2012-09-24T04:01:35.460 に答える
0

私はこれと同じ疑問を持ってここに着陸しましたが、役立つかもしれない興味深い癖を見つけました。LESSを使用しているときに作成したHTMLに従ってスタイルをネストすることを好みます。

たとえば、私のHTMLが次のようになっている場合：

<div id="content">
  .....
  <div class="form-container">
    <input type="text" class="form-control"....>
    <textarea class="form-control"></textarea>
    ......
  </diV
</div>

私のスタイルシートは次のようになります。

#content{
  .form-container{
     color: red;
     .form-control{
       border: 1px solid black;
     }
  }
}

ここで、input要素とtextareaを別の方法でコーディングしたいと思いました。上記の答えを見たとき、私はこれを試しました：

#content{
  .form-container{
     color: red;
     .form-control{
       border: 1px solid black;
       input&{
         height: 40px;
       }
       textarea&{
         height: 100px;
       }
     }
  }
}

input&部分（および）は次のtextarea&ようにコンパイルされました：

input#content .form-container .form-control {
  height: 20px;
}

したがって、これは覚えておくべき警告です。これを解決するには、ネストされた部分から.form-control部分を抽出するだけです。

于 2021-07-19T07:46:00.547 に答える