46

semantic私は多くの異なる要素に適用するクラスを持っています。クラスが適用されるhtmlタグに応じて、異なるスタイルを適用したいと考えています。これは私がそれをやろうとした方法です:

.semantic {
    &ul {
        padding: 0;
        margin: 0;
    }
    &p {
        margin: 0;
    }
}

これはうまくいきません。もちろん、このように書くこともできますが、あまり「DRY」ではありません。

 .semantic ul {
    padding: 0;
    margin: 0;
 }

 .semantic p {
     margin: 0;
 }

これは可能ですか？

編集: 明確にするために、ここに私の HTML がどのように見えるかの例を示します:

<ul class='semantic'>
    <li>An Item</li>
</ul>

<p class='semantic'>This text is semantically a paragraph, but should not be displayed as such</p>
4

3 に答える 3

66

Sass 3.4 の場合:

.semantic {
    @at-root {
      ul#{&} {
        padding: 0;
        margin: 0;
      }
      p#{&} {
        margin: 0;
      }
    }
}

生成:

ul.semantic {
  padding: 0;
  margin: 0;
}

p.semantic {
  margin: 0;
}

@at-rootは、ブロックを最上位に移動します。&これにはいくつかの用途があります (リンクを参照) が、ここでは、ルールが の子セレクターであることを暗示することなく、構文を利用し続けるために使用されています.semantic。

于 2015-06-05T14:23:00.827 に答える