web-dev-qa-db-ja.com

：global（コロングローバル）は何をしますか？

一部のSCSSファイルで、次のように表示されます。

:global {
  /* ... */
}

SCSS機能なのかCSS機能なのかわかりません。探してみましたが、一目で良い結果が出ませんでした。

csscss-modules
21
wellbeck190

CSS Modules を使用しているようです。あなたがドキュメントに従うなら、彼らは言う：

：globalは、現在のセレクターのグローバルスコープに切り替えます。識別子。 ：global（.xxx）または@keyframes：global（xxx）は、括弧で囲まれたものをグローバルスコープで宣言します。

6
Troyer

この演算子は CSS Modules で使用されます。モジュラーCSSは、CSSモジュールコンパイラを使用して、それぞれのモジュール（Reactコンポーネントなど）内のCSSスタイルをスコープします。

以下は、Reactモジュールの例です（ErrorMessaging.less ReactコンポーネントのファイルErrorMessaging.jsx内）：

:global(.ocssContainer) {
  .ui_column {
    padding-left: 0;
  }
}

これは次のようにコンパイルされます：

  .ErrorMessaging__alertContainer--1I-Cz .ocssContainer .ErrorMessaging__ui_column--3uMUS {
    padding-left: 0;
  }

しかし、ここで:global修飾子を.ui_columnに追加します。

:global(.ocssContainer) {
  :global(.ui_column) {
    padding-left: 0;
  }
}

そして、これは次のようにコンパイルされます：

  .ErrorMessaging__alertContainer--1I-Cz .ocssContainer .ui_column {
    padding-left: 0;
  }

.ui_columnは、ErrorMessaging _の一部である.ui_column要素だけでなく、子Reactコンポーネントを含む、そのスタイルのすべての子要素に適用できますReactコンポーネント。

4
JohnK