SCSSの変数の書き方

Question

次のようなSCSSがあります。

.outer-box {
  :global {
    .inner-area-1 {
      background-color: white;
    }
    .inner-area-2 {
      background-color: blue;
    }
  }
}

この中で、 :global は、 scssの文法だと変数でしょうか？ global は SCSSで決められている名前（予約語？）でしょうか？

詳しい方よろしくおねがいいたします。

Answer 1

:global は、 scssの文法だと変数でしょうか？

いえ。違います。SCSSの変数は$で始まります。

global は SCSSで決められている名前（予約語？）でしょうか？

いえ、これはおそらくWebpackが解釈するものです。参照

Comments

[退会済みユーザー]

ご回答ありがとうございます！ そうなんですね。職場のフロントエンジニアの方に伺ってみます。

Answer 2

css-loader(webpack)には

:global(.class){}

っていう構文があります

scssではそれを

:global{
  .class{}
  .class{}
}

ってかけるようにしているって感じです

こちらを読むとよりわかりやすいと思います

Comments

[退会済みユーザー]

stackoverflowのリンクありがとうございます！とても参考になります。