8

カスタム プロパティの値を に設定すると、inherit他のすべての CSS プロパティに期待することとまったく同じことが行われます。つまり、親の同じプロパティ値を継承します。

通常のプロパティ継承:

<style>
  figure {
    border: 1px solid red;
  }
  figure > figcaption {
    border: inherit;
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has the same border
    as its parent because it is inherited</figcaption>
</figure>

カスタム プロパティの継承 (明示的):

<style>
  figure {
    --foobar: 1px solid green;
  }
  figure > figcaption {
    --foobar: inherit;
    border: var(--foobar);
  }
</style>
<figure>this figure has no border
  <figcaption>this figcaption has a green border
    because it explicitly inherits --foobar</figcaption>
</figure>

カスタム プロパティの継承 (暗黙的):

すべてのカスタム プロパティ ( とは異なりborderます) はデフォルトで継承されます

<style>
  figure {
    --foobar: 1px solid green;
  }
  figure > figcaption {
    border: var(--foobar);
  }
</style>
<figure>this figure has no border
  <figcaption>this figcaption has a green border
    because it implicitly inherits --foobar</figcaption>
</figure>

私の質問

その値を実際にキーワードに計算する場合、カスタム プロパティにのリテラル値をどのように設定しますか?inheritinherit

<style>
  figure {
    border: 1px solid red;
    --foobar: 1px solid green;
  }
  figure > figcaption {
    border: var(--foobar);
  }
  figure > figcaption:hover {
    --foobar: inherit;
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has a green border
    because it inherits --foobar</figcaption>
</figure>
<!-- on hover -->
<figure>this figure has a red border
  <figcaption>I want this figcaption
    to have a red border (inherited from figure)
    but its border is green!</figcaption>
</figure>

この例では、2 番目figcaption(ホバー時) に親の赤い境界線を継承させたいので、 に設定--foobarしinheritます。ただし、例 2 に示すように、これは に計算されませんinherit。親のプロパティ--foobar(存在する場合) から継承される値に計算されます。この場合は緑です。

CSS 作成者がこのように設計した理由を完全に理解しています。--foobar他の CSS プロパティと同じなので、設定inheritはその値を継承する必要があります。だから私は、2番目figcaptionに親の境界線を継承させるための回避策があるかどうか尋ねていると思います。

注、私はやることを考えました

figure > figcaption:hover {
  border: inherit;
}

しかし、これは CSS 変数を使用する目的に反します。

figure > figcaptionすべてが値を使用する他の多くのプロパティがある場合var(--foobar)、ホバーシナリオのためにそれらをもう一度再定義したくありません。これらのプロパティを一度だけ設定してから、コンテキストに基づいて変数を再割り当てしたいと思います。

4

1 に答える 1

-1

私はいくつかの考えをしましたが、この解決策は私を襲いました。カスタム プロパティをプリプロセッサ ミックスインと組み合わせて使用​​できます。

<style type="text/less">
  // NOTE: not syntactically valid CSS!
  .mx-border(@arg) {
    border: @arg;
  }
  figure {
    .mx-border(1px solid red);
    --foobar: 1px solid green;
  }
  figure > figcaption {
    .mx-border(var(--foobar));
  }
  figure > figcaption:hover {
    .mx-border(inherit);
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has a green border
    because it inherits --foobar</figcaption>
</figure>
<!-- on hover -->
<figure>this figure has a red border
  <figcaption>This figcaption
    has a red border because the mixin
   sets the `border` property to `inherit`.</figcaption>
</figure>

このようにして、すべての依存スタイルを.mx-border()mixin にカプセル化できます。これを行うと、CSS カスタム プロパティを利用することはできませんが、:hover.

基本的にこれはwrite と同じですが、border: inherit;より多くのスタイルを mixin に入れることができ、それらを複製する必要はありません。

于 2016-10-07T00:54:36.033 に答える