什么:全球(冒号全球)呢？

Question

在一些SCSS文件中,我看到以下内容:

:global {
  /* ... */
}

我不知道它是SCSS功能还是CSS功能.我试着搜索它但是第一眼看不到任何好的结果.

Answer 1

此操作符在CSS模块中使用。模块化CSS使用CSS模块编译器将CSS样式的作用域限定在它们各自的模块（例如React组件）中。

这是一个React模块的示例（在React组件的文件ErrorMessaging.less中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可以应用于具有该样式的任何子元素，包括子React组件中的.ui_column元素，而不仅仅是ErrorMessagingReact组件中的元素。

Answer 2

看来他们正在使用CSS模块。如果您遵循文档，他们会说：

：global切换到当前选择器的全局作用域。标识符。：global（.xxx）分别 @keyframes：global（xxx）在全局范围内用括号声明内容。

Answer 3

选择:global器关键字在 css 模块中使用，以指定类的作用域不应限于定义它的组件。该选择器允许该类在应用程序中全局使用，而不仅仅是在特定组件中使用。例如，假设您.is-global-class在 CSS 模块文件中定义了一个类，您可以:global(.is-global-class)将该类应用于某个元素并使其全局可用。