2

私は.listすべて赤い色を必要とするいくつかの要素を持っています。これらの.list要素のうち、クラスのあるもの.fooはより大きなフォント.barが必要ですが、より小さなフォントが必要になります.

CSS では、次のようになります。

.list {
  color: red;
}

.list.foo {
  font-size: 150%;
}

.list.bar {
  font-size: 75%;
}

Stylus で.list3 回使用せずにこれを取得する方法はありますか? 私はこれが機能することを知っています：

.list
  color red

.list.foo
  font-size 150%

.list.bar
  font-size 75%

代わりに、特定のプロパティに.list特定の制約 ( .foo、 ) を追加して、すべてが要素に属していることを明確にするために、次のようなものが欲しいです。.barただし、次の例では代わりに子孫が選択されます。

.list
  color red

  .foo
    font-size 150%

  .bar
    font-size 75%

この種の構造を可能にする Stylus の構文はあり ます.listか。.list.foo.list.bar

4

1 に答える 1

5

Stylus は、 Sass/SCSSやLESS&と同様に、前のネスト レベル (「親セレクター」) のセレクターを参照するために を使用します。これは、StylusのSelectorsリファレンスに示されています。

これまで Stylus を使用したことはありませんが、次の方法で問題が解決するかどうかを確認してください。

.list
  color red

  &.foo
    font-size 150%

  &.bar
    font-size 75%
于 2012-01-22T13:23:18.863 に答える