SCSSが黒を返します

Question

私はscssを持っています。私も

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

と同様に試してみました

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

：：ブラックなど$darkBlueを返すされているそれらのすべてが

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

を私のコマンドラインがある...黒としてdarkGreenを返しますエラーを返さない、何が間違っている？ありがとうございました！

ps。 here is a fiddle

Answer 1

blackは正しい値です。このCSSを生成

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

：すでにblackにかなり近いです

body { 
    background-color: #0c1d26; 
} 

には、以下のSCSSしてください。

さて、次SCSS取る：以下CSS生成

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

：それは理にかなっているので、

body { 
    background-color: #010203; 
} 

それは実際にblackをせずに取得するようblack程度の近くだという59%を超えるものはblackを生成します。

Answer 2

darkenの機能は、単に黒で色を覆います。 darken(#62a8cf, 60%)は黒色以上の色になるので、#000000にキャップされています。試してくださいdarken(#62a8cf, 30%) - これは、色が#245774になります。

---

どうdarken動作しますか？

darkenは、色の明度を取ります。この場合、#62a8cfの明度はちょうど60なので、60を減じると明度は0になり、これは黒色になります。

Answer 3

darkenの代わりに、私はSassの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%); 

規模色対暗く使ってあなたの例で返された値を参照してください。ここでは

は、例えば、色の明度が0％と100％の間の任意の場所とすることができる仕組みを説明Sass docsからの抜粋です。 scale-color（$ color、$ lightness：40％）を呼び出すと、結果として得られる色の明度は元の明度から100の間の40％になります。スケールカラー（$ color、$ lightness：-40％）代わりに、明度が元とこれを考慮して0

間の道の40％になりますと呼ばれている、あなたがscale-color($blue, $lightness: -100%)を入れていない限り、あなたも、スケール色の値として黒受け取ることはありません-99％で返される値は＃010202です。