4

例を挙げて説明します。

次の CSS ルールを想像してください。

.parent {
  color: blue;
}
.child {
  color: red;
}
.parent .child {
  color: white;
}

ここで、 LESS.parentを使用するのと同等のクラスと別のクラスを作成したいとします。.child

「拡張」を使用すると、目的の一部を達成できます。

.newParent {
  &:extend(.parent all);
}
.newChild {
  &:extend(.child all);
}

レンダリングします:

.parent,
.newParent {
  color: blue;
}
.child,
.newChild {
  color: red;
}
.parent .child,
.newParent .child,
.parent .newChild {
  color: white;
}

これにより、新しいクラスは古いクラスとほぼ同等になります。

.newParent .newClass最後のルールセットから欠落しています。

この完全な同等性を達成する方法はありますか?

注: これは、Bootstrap を使用していて、クラスに別の名前を使用したい (フレームワークからの抽象化を高めるため) 人にとって役立つ可能性があります。たとえば、 と の名前を変更する.input-appendと.add-onします。この場合、両方のクラスに関連するすべてのセレクターを拡張する必要があります。これには、両方が表示されるもの ( など.input-append .add-on { ... }) も含まれます。

前もって感謝します！

4

1 に答える 1

6

このallオプションは、既存のすべての階層関係/ネストされたセレクターに新しいセレクターを追加します。

したがって、ネストされたセレクターでそれを拡張すると、ネストされたセレクターが で拡張.parent .childされます。これは、 とのこの関係が定義されているためです。で拡張すると、ネストされたセレクターは で拡張されます。これは、との関係が存在するためです。そして、あなたはこのCSSになります：.parent.newParent.newParent .child.child.child.newChild.parent .newChild.child.parent

.parent .child,
.newParent .child,
.parent .newChild {
  color: white;
}

注:これは、拡張機能で作成されたネストされたセレクターに基づくセレクターを作成しません。拡張前は の定義も定義.newParent .childも存在しないため、ルール拡張後に作成される.parent .newChild可能性があります。.newParent .newChild

CSS出力をどのように正確に表示したいかは完全にはわかりませんが、「関係」/結合/ネストされたセレクターをいつでも拡張してallオプションを回避できるため、すべてのハイブリッドセレクターを生成しません（.parent .newChildと.newParent child):

.newParent {
  &:extend(.parent);
}
.newChild {
  &:extend(.child);
}
.newParent .newChild {
  &:extend(.parent .child);
}

またはネストされた形式で：

.newChild {
  &:extend(.child);
}
.newParent {
   &:extend(.parent);
   .newChild {
      &:extend(.parent .child);
   }
}

CSS出力は次のようになります。

.parent,
.newParent {
  color: blue;
}
.child,
.newChild {
  color: red;
}
.parent .child,
.newParent .newChild {
  color: white;
}

必要に応じて、オプションを追加することで、ネストされたすべてのセレクターの組み合わせを簡単に追加できるようになりallました。これにより、セレクターのすべての順列が取得され、次のCSSが実現されます。

.parent,
.newParent {
  color: blue;
}
.child,
.newChild {
  color: red;
}
.parent .child,
.parent .newChild,
.newParent .child,
.newParent .newChild {
  color: white;
}
于 2013-08-09T11:06:37.273 に答える