css - 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%)