什么：全球（冒号全球）呢？

Question

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

response.headers

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

Answer 1

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

  

：全局切换到当前选择器的全局范围。   标识符。 ：global（.xxx）resp。 @keyframes：global（xxx）声明   全球范围内括号内的东西。

Answer 2

在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可以应用于具有该样式的任何子元素，包括在子React组件中，而不仅是.ui_column React组件一部分的ErrorMessaging元素。