0

HTMLをクリーンに保ち、非セマンティックブートストラップクラスの代わりにミックスインを使用しようとしています。

私のすべての「インデックス」テーブルには、.tableと.table-hoverの両方が必要です。

table.index {
  .table;
  .table-hover;
}

これは、.tableの下の要素に適用されるルールを除いて、正常に機能します。例：

.table tbody tr

.table tbody trミックスインできる場所はあり.index tbody trますか？

table.index {
  .table;
  .table-hover;

  tbody tr {
   .table tbody tr;
  }
}

もちろん、この最後のコードブロックは、6行目の単純な構文エラーで失敗しています。

4

2 に答える 2

2

答えはいいえだ。" 現在、セレクター文字列に要素があるセレクターをミックスインすることはできません。trそれはLESSの制限かもしれませんが、 aがミックスインであるかセレクターであるかを区別するのは難しいでしょう。

本当の問題は、ブートストラップがコードの一部にネストを使用できなかったことです。たとえば、以下はtables.less（2013年2月18日現在）からのものです。

.table tbody tr {
  &.success > td {
    background-color: @successBackground;
  }
  &.error > td {
    background-color: @errorBackground;
  }
  &.warning > td {
    background-color: @warningBackground;
  }
  &.info > td {
    background-color: @infoBackground;
  }
}

このように構成されている場合.table（との間の余分なネストブラケットに注意してくださいtbody）...

.table { 
   tbody tr {
      &.success > td {
        background-color: red;
      }
      &.error > td {
        background-color: blue;
      }
      &.warning > td {
        background-color: cyan;
      }
      &.info > td {
        background-color: yellow;
      }
   }
}

...それならそれはあなた.indexのうまく混ざり合うでしょう。したがって、必要なものを取得するには、ブートストラップコードを上記に「修正」し、すべての要素が.table呼び出しでネストされていることを確認する必要があります。ネストされていない他のセレクター呼び出しも修正する必要があります。corrections.less後にロードされるファイルのようなことを行うことができますbootstrap.less。そうすれば、ブートストラップが更新されても、修正が失われることはありません。次に、更新が行われるときに、修正が更新される必要があるかどうかを確認する必要があります（または、ブートストラップが問題を解決する場合は削除します）。

コピーして修正する必要がある量はすべて、ミックスインとして使用する不適切にネストされているものの数によって異なります。ミックスインする必要がない場合は、わざわざ修正しないでください。

于 2013-02-19T03:28:04.817 に答える
0

ScottSの回答に基づく最終的な解決策は次のとおりです。

@import "twitter/bootstrap/bootstrap";
...
@import "corrections";

.index {
  .table;
  .table-hover;
}

変数.lessをcorrection.lessに再度インポートする必要がありました（元々はbootstrap.lessにインポートされていましたが、corrections.lessでは使用できませんでした）。インポート時に.less拡張子は必要ないことに注意してください。

//corrections.less

@import "twitter/bootstrap/variables.less";

.table {
  tbody tr {
    &.success > td {
      background-color: @successBackground;
    }
    &.error > td {
      background-color: @errorBackground;
    }
    &.warning > td {
      background-color: @warningBackground;
    }
    &.info > td {
      background-color: @infoBackground;
    }
  }
}
.table-hover {
  tbody tr {
    &.success:hover > td {
      background-color: darken(@successBackground, 5%);
    }
    &.error:hover > td {
      background-color: darken(@errorBackground, 5%);
    }
    &.warning:hover > td {
      background-color: darken(@warningBackground, 5%);
    }
    &.info:hover > td {
      background-color: darken(@infoBackground, 5%);
    }
  }
}
于 2013-02-19T16:36:12.187 に答える