sass - 更新已弃用的 SASS 颜色乘法语法

Question

在旧版本的 SASS 中，可以将颜色值乘以一个常规数字:

$white: #E2E2E2;
color: $white * 0.7; /* results in #9E9E9E */

我正在处理在灰色上广泛使用它的代码。由于这种语法现在被认为已弃用，我需要找到一种产生相同结果的替代方法。

有一个recommendation使用scale-color:

color: scale-color($white, $lightness: -30%);

即使它产生相同的结果并且可以很容易地计算出新值(因子 - 1)它不会对大于 1 的因子同样有效:

$black: #050505;
color: $black * 2; /* results in #A0A0A0 */
color: scale-color($black, $lightness: 100%); /* results in pure white */

是否有更好和统一的方法来将其更新为新的符合标准的语法？

Answer 1

当您使用算术函数并希望获得完全相同的结果时:

@function colorArithmetic($color, $scale: 1, $offset: 0) {
  $red: (red($color) * $scale) + $offset;
  $green: (green($color) * $scale) + $offset;
  $blue: (blue($color) * $scale) + $offset;
  @return rgb($red, $green, $blue)
}

例如你可以替换这个:

$red: $globalRed * $scale;
$blue: $globalBlue * $scale;
$green: $globalGreen * $scale;
$yellow: $globalYellow * $scale;

到此代码:

$red: colorArithmetic($globalRed, $scale);
$blue: colorArithmetic($globalBlue, $scale);
$green: colorArithmetic($globalGreen, $scale); 
$yellow: colorArithmetic($globalYellow, $scale);