SASS 遮蔽和流控制详细介绍

遮蔽和流量控制是更改值的方法变量。当我们使用SASS库时, 这两种方法非常有用。我们将一一讨论。

阴影：

可以使用与全局变量相同的名称声明局部变量。如果这样做, 则该变量在本地范围内的值将是该变量在本地范围内的值, 而不是全局值。请参阅以下示例：

SASS文件：

$global_local: global-value;

ul {
    $global_local: local-value;
    width: $global_local; 
}

span {
    width: $global_local;
}

编译的CSS文件：

ul {
  width: local-value;
}

span {
  width: global-value;
}

现在, 如果要在条件执行的某个时刻或出于任何原因更改全局变量的值, 该怎么办？ SASS允许我们在局部变量声明之后使用！global来执行此操作。这个概念叫做"阴影"因为使用！global更改全局变量值会反映在整个文档中, 而不仅仅是在！global表达式之后。

SASS文件：

$global_local: global-value;

ul {
    $global_local: local-value !global;
    width: $global_local; 
}

span {
    width: $global_local;
}

编译的CSS文件：

ul {
  width: local-value;
}

span {
  width: local-value;
}

注意：！global只能用于已经声明的变量, 否则在编译时会产生错误。

用法：当你使用SASS库并且要更改在该库中声明的全局变量的值时, 将使用它。

流控制：

你可以使用流控制编译来更改变量的值。在这里, 变量的值将在流控制块之后更改。之前的变量值将保持不变。请参阅以下示例：

SASS文件：

// This is default mode
$background-color-alpha: 0.5;


@mixin flow-control($dark-mode) {

  // If you want to have dark mode then 
  // use flow-control to make the color dark
  @if $dark-mode {
    $background-color-alpha: 1 !global;
  }

  background-color: rgba(250, 0, 100, $background-color-alpha);
  display: block;
  border-radius: 15px;
  color: white;

}

.button {
  @include flow-control(true);
}

编译的CSS文件：

.button {
  background-color: #fa0064; // rgba(250, 0, 100, 1);
  display: block;
  border-radius: 15px;
  color: white;
}

用法：当我们编写自己的SASS库并且希望允许用户使用条件编译来更改全局变量值时, 这特别有用。

---