1

LESSを使用してこの古いCSSを作成するための最良の方法は何でしょうか？

.paginationContainerTop {width:100%; margin-bottom:10px;}
.paginationContainerTop .paginationNav {float:right; text-align:right;}

.paginationContainerBottom {width:100%; margin-top:10px;}
.paginationContainerBottom .paginationNav {float:right; text-align:right;}

私の理解に基づくと、次のようになります。

.paginationNav {
    float: right; 
    text-align: right;
}

.paginationContainerTop { 
    margin-bottom: 10px;
    .paginationNav;
}

.paginationContainerBottom { 
    margin-top: 10px;
    .paginationNav;
}
4

3 に答える 3

2

.paginationNavをネストする必要はありません。他のdiv内のミックスインとして。

トムは正しいです、トップ/ボトムはIDである必要があり、必要ではないかもしれませんか？私はあなたのHTMLがこのように見えることを想像しています：

<div id="header">
     <div id="paginationNavTop">
          <div id="paginationNav">[nav stuff]</div
     </div>
</div>

[body stuff]

<div id="footer">
     <div id="paginationNavBottom">
          <div id="paginationNav">[nav stuff styled differently]</div
     </div>
</div>

その場合は、これをCSSとして記述できます。

  .paginationNav {float: right; text-align: right;}
  #header .paginationNav {margin-bottom: 10px;}
  #footer .paginationNav {margin-top: 10px;}

上と下の特定のスタイルを持つ代わりに。

LESSでは、次のようにコードをネストできます。

  .paginationNav {float: right; text-align: right;}
  #header {
     .paginationNav {margin-bottom: 10px;}
  }
  #footer {
      .paginationNav {margin-top: 10px;}
  }
于 2011-03-09T03:29:01.400 に答える
0

簡単な答えは

.paginationContainerTop, .paginationContainerBottom {width:100%;}
.paginationNav {float:right; text-align:right;}
.paginationContainerTop {margin-bottom:10px;}
.paginationContainerBottom {margin-top:10px;}

しかし、それはあなたに不利益をもたらしています。IDとなるクラスを使用しているようです。コードを正しく読んでいる場合は、共有プロパティをクラスに分割してから、個々の要素に固有のプロパティにID（.paginationContainerTopではなく#paginationContainerTop）を使用することをお勧めします。ただし、この場合、変更したものを継承しない限り、デフォルトのプロパティ（幅：100％）を指定しているため、CSSをさらに次のように調整できます。

.paginationNav {float:right; text-align:right;}
.paginationContainerTop {margin-bottom:10px;}
.paginationContainerBottom {margin-top:10px;}

また、.paginationNavスタイルから.paginationContainerTop / Bottom修飾子を削除したことにも注意してください。何かをオーバーライドする必要がない限り、またはこれによって競合が発生する場合を除いて、継承チェーンを指定する必要はありません。

于 2011-03-08T14:26:30.930 に答える
0 
.paginationContainerTop {
    width: 100%;
    margin-bottom: 10px;
    .paginationNav {
        float: right;
        text-align: right;
    }
}
.paginationContainerBottom {
    width: 100%;
    margin-top: 10px;
    .paginationNav {
        float: right;
        text-align: right;
    }
}

私はちょうどあなたのcssをlessに変換するためにこのツールを使用しました：http： //beautifytools.com/css-to-less-converter.php これが役立つことを願っています:)

于 2015-12-25T19:23:34.213 に答える