1

これを達成したいとしましょう：

#page {
  p {
    margin: 10px 20px;
    color: white;
    padding: 10px;
  }
  #form {
    p {
    color: gray;
    }
  }
}

p全体#pageとして、一般的なスタイルを持っているはずであることに気付くでしょう。ただし、を除く#page #form一般を継承する必要があります。pcolor

これを書く良い方法はありますか？

ありがとう。

4

2 に答える 2

0

いいえ、スタイル プロパティの「デフォルト」値を復元する方法はありません。

スタイルをwith#page pの直接の子孫である段落のみに制限できます。そうしないと、一致するすべての段落に必ず一致します。これらの要素にスタイルが適用されます。 で元に戻したい場合は、表示したいスタイルを明示的に指定する必要があります。#page#page > p#page p#page #form p#page p#page #form p

于 2012-09-28T03:56:49.247 に答える
0

@extend は使用できますが、継承されたセレクターでは使用できません。

次のように @extend-only セレクターを使用できます。

#page {
    %common_p {
        margin: 10px 20px;
        color: white;
        padding: 10px;
    }

    p {
        @extend %common_p;
    }

    #form {
        p {
            @extend %common_p;
            color: gray;
        }
    }
}

次のように出力します

#page p, #page #form p {
  margin: 10px 20px;
  color: white;
  padding: 10px; }
#page #form p {
  color: gray; }

これがあなたが望んでいることを達成することを願っています！

カスケードにより、#form 内の p タグはすでに #page の p タグも取得しているため、これがより良いかどうかはわかりません。たとえば、マージンとパディングと色を取得しますが、色は上書きされます。

これは、カスケードが発生していなくても (たとえば、#form が #page の外に存在する場合)、単純にそれを強制します。その場合は、SASS がスタイルを組み合わせて出力の繰り返しを少なくするため、この手法の方が優れています。

@extend の詳細については、http: //sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders を参照してください。

于 2013-02-05T00:27:32.060 に答える