SASS：执行多种颜色操作？

Question

使用SASS，是否可以对单个十六进制代码执行多种颜色操作？我想以编程方式减轻并增加5％的饱和度。

saturate($color, $amount)
lighten($color, $amount)

Answer 1

您可以将它们链接在一起：

saturate(lighten($color, $amount), $amount)

Answer 2

如果你只想做一次，就一个接一个地使用它：

$color: #123
$amount: 5%
$color: saturate($color, $amount)
$color: lighten($color, $amount)

.element
  background-color: $color

如果您想重复，请创建一个功能：

@function saturate-and-lighten($color, $amount)
  $output: saturate($color, $amount)
  $output: lighten($output, $amount)
  @return $output

然后像这样使用它：

.element
  background-color: saturate-and-lighten(#123, 5%)