SCSS 變數作用域

SCSS之所以便利，是因為它具有了程式語言的某些特性。

讓原本規則刻板的CSS變的靈活起來，下面介紹一下SCSS中的作用域概念。

幾乎所有程式語言都有作用域概念的涉及，原理大同小異，SCSS中的也是如此。

SCSS中，變數具有兩種作用域型別：

（1）.全域性作用域。

（2）.區域性作用域。

預設情況下，定義在選擇器之內的變數為區域性變數，定義在選擇器之外的為全域性變數。

看一段程式碼例項：

[Scss] 純文字檢視 複製程式碼
$bg-color: green;
div{
  color:$bg-color;
}

上面的程式碼宣告瞭一個全域性變數，它在全域性範圍都是有效的。

編譯成css程式碼如下:

[CSS] 純文字檢視 複製程式碼
div {
  color: green;
}

再來看一段程式碼例項:

[Scss] 純文字檢視 複製程式碼
$bg-color: green;
div{
  $border-width:5px;
  color:$bg-color;
  border:$border-width solid red;
}
p{
  border:$border-width solid red;
}

上面的程式碼會報錯，因為$border-width是區域性作用域，不能夠在p選擇器中使用。

特別說明:如果在選擇器中宣告瞭一個變數，那麼在此選擇器中巢狀的子選擇器都可以使用此變數。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
.wrap {
  $bg-color: red;
  &:after {
    background: lighten($bg-color, 10%);
  }
}

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

[CSS] 純文字檢視 複製程式碼
.wrap:after {
  background: #ff3333; 
}

下面再來看一個程式碼例項:

[Scss] 純文字檢視 複製程式碼
@function my-function() {
  $text-color: black;
  @return $text-color;
}
.wrap {
  color: my-function();
  &:after{
    background: $text-color;
  }
}

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

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

這是因為變數的作用域是在其宣告的時候就確定了，而不是在呼叫的時候確定。

全域性變數和區域性變數也可以是同名的，不過區域性變數會覆蓋全域性變數。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
$text-color:red;
@mixin button-style {
  $text-color: lime;
  color: $text-color;
}
@mixin link-style {
  $text-color: black;
  color: $text-color;
}
button {
  @include button-style;
}
a {
  @include link-style;
}
.wrap {
  background: $text-color;
}

上面程式碼的編譯結果如下:

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

在區域性作用域，同名區域性變數會覆蓋全域性變數。

使用!global可以改變區域性變數的作用域，具體可以參閱scss !global一章節。