做什么: global (冒号 global)做什么?

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

:global {
/* ... */
}

我不知道它是一个 SCSS 功能还是一个 CSS 功能。 我试着找了一下,但是一眼就没有找到好的结果。

67291 次浏览

It looks like they are using CSS Modules. If you follow the docs they say:

:global switches to global scope for the current selector resp. identifier. :global(.xxx) resp. @keyframes :global(xxx) declares the stuff in parenthesis in the global scope.

This operator is used in CSS Modules. Modular CSS uses a CSS Modules compiler to scope CSS styles within their respective modules (e.g., React component).

Here's an example from a React module (in the file ErrorMessaging.less for the ErrorMessaging.jsx React component):

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

This gets compiled into:

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

But now I add a :global modifier onto .ui_column:

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

And this is what it compiles to:

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

Now .ui_column can apply to any child element with that style, including in a child React component, and not just .ui_column elements that are part of the ErrorMessaging React component.