Question

我有一些scss。哪个将$darkBlue作为黑色返回：

$blue: #62a8cf;
$darkBlue: darken($blue, 60%);
body {background-color:$darkBlue;}

我也试过

$blue: #62a8cf;
$darkBlue: darken(#62a8cf, 60%);
body {background-color:$darkBlue;}

以及：

$blue: #62a8cf;
body {background-color:darken(#62a8cf, 60%);}

所有这些都将darkGreen作为黑色返回...我的命令行没有返回任何错误，我做错了什么？谢谢！

PS。 here is a fiddle

Answer 1

black是正确的值。

采取以下SCSS：

$blue: #62a8cf;
body {background-color:darken(#62a8cf, 50%);}

产生这个CSS：

body {
  background-color: #0c1d26;
}

那已经非常接近black。

现在，请使用以下SCSS：

$blue: #62a8cf;
body {background-color:darken(#62a8cf, 59%);}

产生以下CSS：

body {
  background-color: #010203;
}

它与black接近black而实际上不是59%，因此black以上的任何内容都会产生for key in dict.keys(): ... if key in string: <do stuff>。< / p>

Answer 2

darken功能只是将颜色设为黑色。 darken(#62a8cf, 60%)会导致颜色等于或深于黑色，因此它的上限为#000000。试试darken(#62a8cf, 30%) - 这会产生颜色#245774。

darken如何运作？

darken采用浅色。在这种情况下，#62a8cf的亮度恰好为60，因此将其减少60会导致亮度为0，即黑色。

Answer 3

我更喜欢使用Sass的darken功能，而不是scale-color。这将为您提供大量灵活性，使特定颜色更亮或更暗。此功能将尝试做的是增加或减少颜色的亮度，同时考虑到当前颜色的亮度。

使用darken vs. scale-color

查看示例中的返回值

// Global blue
$blue: #62a8cf;

// Darken blue - Returns #000000
$darkBlue: darken($blue, 60%);

// Scale-color blue - Returns #1d465d
$darkBlue: scale-color($blue, $lightness: -60%);

此功能对微调非常有用。以下是Sass docs解释其工作原理的代码段

例如，颜色的亮度可以是0％到100％之间的任何值。如果调用缩放颜色（$ color，$ lightness：40％），结果颜色的亮度将是其原始亮度与100之间的40％。如果缩放颜色（$ color，$ lightness：-40％）相反，亮度将是原始和0之间的40％。

考虑到这一点，除非你放了scale-color($blue, $lightness: -100%)，否则你不会收到黑色作为scale-color的值，即使在-99％你得到＃010202作为返回值。

SCSS返回黑色

3 个答案: