10

ミックスインとパラメトリック ミックスインについて知っています。私たちが探しているのは、CSS / LESS の汎用セレクターを mixin にする方法です。

たとえば、Twitter BootStrapでは、ここに

.navbar .nav > li {
  float: left;
}

クラスで使用する必要がある場合は、.mynavbar と言うと、これを実行できるようになりたい

INPUT->
.mynavbar {
  .navbar .nav >li;
}

OUTPUT->
.mynavbar {
  float:left;
}

現在のバージョンの LESS では、コンパイラがパーサー エラーにフラグを立てるため、これを実行できないことがわかりました。これが実行可能になるように、less.js のソース コードを少し変更するのを誰かに手伝ってもらいたかったのです。

mixin パーサーのソース コードにたどり着きました。そこでRegExpを変更しようとしましたが、パーサーの他の部分に干渉します。単に受け入れるのではなく、タグ/属性セレクターなどのミックスインを受け入れる必要があるため、いくつかの変更を加えるだけでよいことはわかって.mixinい#mixinますinput[type=text]。

現在、Bootstrap を使用する UI フレームワークの開発に必要です。残念ながら、ブートストラップの多くの場所には、ID やクラスの代わりに直接のタグ セレクターが散らばっています。

4

2 に答える 2

2

まず、私はそのようなことをすることを強く思いとどまらせます。代わりに、CSS の機能を使用して、たとえばブートストラップ ルールが適用されるように HTML を作成してみてください。とにかく、あなたがそれを求めたので、ここに解決策があります。

問題は、セレクターや子ルールの複雑さではなく、タグ名セレクター部分 (つまりli) にあります。したがって、修正する必要があるのは、クラスと ID のみに一致する mixin パーサーです。最初の class または id testを改ざんしたくないと思います。これはおそらく mixin を通常の CSS ルールと区別するために必要だからです (ただし、そのチェックをコメントアウトしてもテストは正常に実行されます)。(実際には、パーサー設定が動作しており、ミックスインの後に試行されるのはコメントとディレクティブだけなので、そのチェックも安全に削除できます)。[#.]ただし、一致する正規表現の後に疑問符を追加することで、mixin セレクターの後の部分でタグ名を簡単に許可できます。そう

while (e = $(/^[#.](?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)) {

– すなわち行 825 – になります

while (e = $(/^[#.]?(?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)) {

テストケースはその後も問題なく実行されますが、微妙な破損が発生する可能性があるため、注意してください。

編集:同じ問題に対してGitHubの問題があります。どうやら、より少ない人々は、より柔軟な… まあ… ルールの混合を許可するのではなく、ミックスイン機能をより狭く機能的なものにしたいと考えています。CSS 出力に関しては、おそらく妥当です。

于 2012-11-26T08:13:01.247 に答える