SASS |阴影和流量控制

阴影和流量控制是改变变量值的方法。这两种方法在我们使用 SASS 库时非常有用。我们将一一讨论。

1. 阴影：
   可以使用与全局变量相同的名称声明局部变量。如果我们这样做，那么局部作用域中该变量的值将是该局部作用域中变量的值，而不是全局值。请参阅下面的示例：

   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 库并且想要改变库中声明的全局变量的值时使用。

2. 流控制：您可以使用流控制编译来更改变量的值。这里变量的值将在流量控制块之后发生变化。它之前的变量值将保持原样。请参阅下面的示例：

   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 库并且希望允许用户通过条件编译更改全局变量值时特别有用。