SASS 遮蔽和流控制详细介绍 _Python特殊变量

遮蔽和流量控制是更改值的方法变量。当我们使用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 遮蔽和流控制详细介绍】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文件：