:global（冒号 global）是做什么的？

Question

在一些 SCSS 文件中，我看到以下内容：

:global {
  /* ... */
}

不知道是SCSS特性还是CSS特性。 我试着搜索它，但第一眼找不到任何好的结果。

Answer 1

:global

运算符用于 CSS 模块。模块化 CSS 使用 CSS 模块编译器在各自的模块（例如 React 组件）中限定 CSS 样式。

这是一个来自 React 模块的示例（在文件

ErrorMessaging.less

中用于

ErrorMessaging.jsx

React 组件）：

: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

可以应用于具有该样式的任何子元素，包括在子 React 组件中，而不仅仅是属于

.ui_column

React 组件的

ErrorMessaging

元素。

Answer 2

看起来他们正在使用 CSS 模块。如果你按照他们说的文档：

:global 切换到当前选择器的全局范围。 标识符。 :global(.xxx) 分别@keyframes :global(xxx) 声明 全局范围内括号中的内容。

Answer 3

:global

选择器关键字在 css 模块中用于指定类不应限定在定义它的组件中。此选择器允许类在应用程序中全局使用，而不是仅在特定组件中使用。例如，假设您在 CSS 模块文件中定义了一个

.is-global-class

类，您可以使用

:global(.is-global-class)

将该类应用于元素并使其在全局可用。