css - CSS カスタムプロパティは、リンクされた CSS ドキュメント全体でグローバルですか?

Question

私は、CSS3 カスタムプロパティ (別名 CSS 変数) で多くの成功を収めるために実験しています。--black: #000;およびbackground: var(--black);型変数について話しています。ただし、変数が別のリンクされたドキュメントで宣言されている場合、私はうまくいきません。

CSS カスタムプロパティのブラウザー互換性は 72% を超えているため (src: https://caniuse.com/#search=css%20variables )、オーディエンスが使用していることがわかっている非常に特定のアプリでそれらを使い始めたいと思っています。互換性のあるブラウザ。

:rootこれらの CSS カスタムプロパティは、リンクされたすべての CSS ドキュメントにわたってスコープ内でグローバルなのか、ドキュメントごとに (要素で) のみグローバルなのか疑問に思っています。

答えが見つかりません（仕様でも）！

私が読んだ研究のいくつか：

私の特定の問題は、Ruby on Rails アプリケーションで発生しています。ここでは<style>、展開時にプリコンパイルされる SCSS スタイルシートインクルードの前のブロックに CSS カスタムプロパティを含めています。SCSS の先頭に変数を含めると、すべて正常に動作します。ただし、<style>ブロックにはテーマ変数が含まれるため、実行時に ERB でコンパイルする必要があります。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      :root {
        --primary-color: #000;
      }
    </style>
    <%= stylesheet_link_tag 'application', media: 'all' %>
  </head>
</html>

css - CSS カスタム プロパティは、リンクされた CSS ドキュメント全体でグローバルですか?

1 に答える 1

Related

Reference

css - CSS カスタムプロパティは、リンクされた CSS ドキュメント全体でグローバルですか?