SASS |负变量值

SASS 变量在为网页编写可维护的样式代码时非常有用。通常，我们要求页面的不同组件具有相同的样式属性值。在这种情况下，将值分配给变量并在需要的地方使用它可以减少将来更改样式所需的工作量。有时，我们可能还需要对属性的变量值取反。例如，考虑下面给出的 SASS 代码：

$marg: 20px;
  
#div1 {
    margin: 0 20px 0 -20px;
}

属性值20px和-20px可以替换为 $marg 变量。解决这个问题的显而易见的方法是：

$marg: 20px;
  
#div1 {
    margin: 0 $marg 0 -$marg;
}

但是，在编译时，这会生成以下 css：

$marg: 20px;
  
#div1 {
    margin: 0 20px -20px;
}

这是因为 SASS 编译器将0 -$marg视为减法运算并输出 -20px。因此，每当我们希望使用一个变量的否定时，它可能会导致不受欢迎的输出 CSS，因为 SASS 编译器可能会将意图误认为是二进制减法。

现在有多种方法可以解决这个问题。

1. 使用括号：用括号将变量括起来会阻止编译器执行减法。

   $marg: 20px;
     
   #div1 {
       margin: 0 $marg 0 (-$marg);
   }
   

2. 用负数执行乘法：简单地将变量乘以 -1 将生成其否定，同时保留其原始单位。

   $marg: 20px;
     
   #div1 {
       margin: 0 $marg 0 -1*$marg;
   }
   

3. 使用插值：对值进行插值将其转换为不带引号的字符串。它可用于获取变量值的否定。但是，不建议这样做，因为输出 CSS 中未加引号的字符串看起来像一个数字，但不适用于数字运算符和函数，这可能会导致误导代码。

   $marg: 20px;
     
   #div1 {
       margin: 0 $marg 0 -#{$marg};
   }
   

在上述所有方法中，在编译时获得以下 CSS：

#div1 {
    margin: 0 20px 0 -20px;
}

通过这种方式，我们可以在正面和负面用例中使用 SASS 变量，从而促进变量重用和更易于维护的代码。