0

spanの子であるすべてがlabel拡張機能を受け取り、同時にSASSを簡素化し、繰り返しを削除したいと思います。

たとえば、次のように書き直します。

label > span {
  extend @informational;
}

label > span.info {
  extend @informational;
  /* other info stuff */
}

label > span.error {
  extend @informational;
  /* other error stuff */
}

これに似たものに：

label {
  span {
    extend @informational;
  }

  span.info {
    /* other info stuff */
    /* this also gets extended, but no explicit extension statement here */
  }
  span.error {
    /* other error stuff */
    /* this also gets extended, but no explicit extension statement here */
  }
}

を拡張するだけでspanは a も拡張されないためですspan.xxx（ただし、拡張することを期待しています）。

方法はありますか？私が試みたすべての組み合わせ (上記のものを含む) は失敗しました。

私もこれを使用せずに試しましたが、関連する各ブロック内で@extendCSS を繰り返して、同じ効果を得ました。informationalこれはCSSの問題（afaics）になりますが、SASSを使用して解決できればそれも問題ありません。

4

1 に答える 1

1

クラスを持つ要素の@informational拡張機能にあるものをオーバーライドする他のスタイル ルールがある場合があります。spanそれも私が見た限りでは…

その場合、クラスセレクターを保持して、特定性の低いspanセレクターを補う必要がありますが、このようにそれらをグループ化して、extend @informational;ステートメントを繰り返す必要がないようにすることができます (また、>ネストレベルの子孫だけでなく、特に子のみを探している場合):

label {
  > span, > span.info, > span.error {
    extend @informational;
  }

  > span.info {
    /* other info stuff */
  }

  > span.error {
    /* other error stuff */
  }
}

要素が持つ特定のクラスに興味がない場合spanは、属性があるかどうかにかかわらずclass、安価なハックとして代わりに属性セレクターを使用できます。

label {
  > span, > span[class] {
    extend @informational;
  }

  /* ... */
}
于 2012-07-11T09:15:05.087 に答える