SCSS kehrt schwarz zurück

Question

Ich habe einige scss.

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

Ich habe auch versucht

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

Neben:

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

Alle von ihnen zurückkehren dunkelgrün schwarz ... meine Befehlszeile ist die $darkBlue als schwarz zurückkehrt keine Fehler, was mache ich falsch? Vielen Dank!

ps.

Answer 1

black ist der korrekte Wert.

Nehmen Sie das folgende SCSS:

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

, dass diese CSS produziert:

body { 
    background-color: #0c1d26; 
} 

, die bereits auf black ziemlich nahe ist.

Nun nehmen Sie die folgende SCSS:

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

, dass die folgenden CSS produziert:

body { 
    background-color: #010203; 
} 

, die auf black ungefähr so ​​nah ist, wie es ohne tatsächlich black sein wird, so macht es Sinn, dass alles über 59% würde black produzieren.

Answer 2

Die Funktion darken kappt einfach die Farbe schwarz. darken(#62a8cf, 60%) würde zu einer Farbe führen, die gleich oder tiefer als Schwarz ist, also ist es auf #000000 begrenzt. Versuchen Sie darken(#62a8cf, 30%) - dies ergibt eine Farbe #245774.

---

Wie funktioniert darken Arbeit?

darken nimmt die Helligkeit einer Farbe. In diesem Fall ist die Helligkeit von #62a8cf genau 60, so dass eine Verringerung um 60 zu einer Helligkeit von 0 führt, was die Farbe Schwarz ist.

Answer 3

Anstelle von darken verwende ich lieber die scale-color Funktion von Sass. Dies gibt Ihnen eine Menge an Flexibilität, um eine bestimmte Farbe heller oder dunkler zu machen. Diese Funktion wird versuchen, die Helligkeit einer Farbe zu erhöhen oder zu verringern und dabei die Helligkeit der Farbe zu berücksichtigen.

Siehe die zurückgegebenen Werte auf Ihrem Beispiel gegen schuppen Farbe mit dunkler

// Global blue 
$blue: #62a8cf; 

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

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

Diese Funktion zur Feinabstimmung sehr nützlich ist.Hier ist ein Schnipsel von Sass docs zu erklären, wie es funktioniert

Zum Beispiel kann die Helligkeit einer Farbe irgendwo zwischen 0% und 100% sein. Wenn Skalenfarbe ($ color, $ lightness: 40%) genannt wird, beträgt die Helligkeit der resultierenden Farbe 40% des Weges zwischen ihrer ursprünglichen Helligkeit und 100. Wenn Skalenfarbe ($ color, $ lightness: -40%) stattdessen aufgerufen wird, wird die Helligkeit 40% der Art und Weise sein, zwischen dem Original und 0.

in diesem Sinne, werden Sie nicht als der Wert der Skala-Farbe schwarz erhalten, es sei denn Sie scale-color($blue, $lightness: -100%) gesetzt haben, auch Bei -99% erhalten Sie # 010202 als Rückgabewert.