SCSS !global

關於scss變數的作用域可以參閱SCSS變數作用域一章節。

此標誌可以改變一個區域性變數的作用域範圍。

[Scss] 純文字檢視 複製程式碼
@mixin button-style {
  $btn-bg-color: lightblue;
  color: $btn-bg-color;
}
button {
  @include button-style;
}
.wrap {
  background: $btn-bg-color;
}

上面的程式碼會報錯如下:

[CSS] 純文字檢視 複製程式碼
Error: Undefined variable: "$btn-bg-color".

很明顯，由於變數是宣告在@mixin混合器之內，所以無法在.wrap選擇器中使用。

程式碼修改如下:

[Scss] 純文字檢視 複製程式碼
@mixin button-style {
  $btn-bg-color: lightblue !global;
  color: $btn-bg-color;
}
button {
  @include button-style;
}
.wrap {
  background: $btn-bg-color;
}

上面的程式碼編譯成css程式碼如下:

[CSS] 純文字檢視 複製程式碼
button {
  color: lightblue; 
}
.wrap {
  background: lightblue; 
}

再來看一段程式碼例項:

[Scss] 純文字檢視 複製程式碼
@mixin button-style {
  $btn-bg-color: lightblue !global;
  color: $btn-bg-color;
}
.wrap {
  background: $btn-bg-color;
}

上面的程式碼儘管新增了!global，但是依然會報錯。

這是因為@mixin混合器如果只宣告沒有引用的話，那麼它內部的程式碼是沒有生效的。