web-dev-qa-db-fra.com

Que fait: global (colon global)?

Dans certains fichiers SCSS, je vois ce qui suit:

:global {
  /* ... */
}

Je ne sais pas s'il s'agit d'une fonctionnalité SCSS ou CSS. J'ai essayé de chercher mais je n'ai pas trouvé de bons résultats à première vue.

csscss-modules
21
wellbeck190

Il semble qu'ils utilisent modules CSS . Si vous suivez les documents, ils disent:

: global passe à la portée globale pour le sélecteur actuel resp. identifiant. : global (.xxx) resp. @keyframes: global (xxx) déclare la substance entre parenthèses dans la portée globale.

6
Troyer

Cet opérateur est utilisé dans Modules CSS . Le CSS modulaire utilise un compilateur de modules CSS pour définir les styles CSS dans leurs modules respectifs (par exemple, React).

Voici un exemple d'un module React (dans le fichier ErrorMessaging.less pour le ErrorMessaging.jsx React):

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

Ceci est compilé dans:

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

Mais maintenant j'ajoute un :global modificateur sur .ui_column:

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

Et c'est ce qu'il compile pour:

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

Maintenant .ui_column peut s'appliquer à n'importe quel élément enfant avec ce style, y compris dans un enfant React composant, et pas seulement .ui_column éléments qui font partie du composant ErrorMessaging React.

4
JohnK