WENIGER: Farbton, Sättigung und Leichtigkeit - wie zu verwenden?

Question

Probieren Sie weniger für ein paar Tage. Kam mit einem Problem mit HSL - Farbton-Sättigung-Leichtigkeit, oder vielleicht ist es ein Problem meines Verständnisses, fürchte ich.

Ich habe versucht, das folgende HTML:

<div class="box hue">1</div>&nbsp;<div class="box saturation">2</div>&nbsp;<div class="box lightness">3</div> 

und versuchte, die entsprechend weniger:

@color2: #167e8a; 
    .hue{ 
     background-color: hue(@color2); 
    } 

    .saturation{ 
     background-color: saturation(@color2); 
    } 

    .lightness{ 
     background-color: lightness(@color2); 
    } 


    .box{ 
     width: 50px; 
     height: 20px; 
    } 

Aber die ersten drei Klassen leer zeigt, zeigt nicht alles - keine Hintergrundfarbe. Aber die Box nimmt Breite & Höhe.

Was Photoshop für mich getan hat:

ich den Farbcode in Photoshop mit Änderungen in HSL geprüft, sie alle verschiedene Farben in verschiedener Kombination zeigen. Warum täuscht mich dann mein WENIGER?

Answer 1

HSL LESS-Funktionen geben keine Farbe zurück, sondern einen ganzzahligen Wert für die Farbe Teil, die der Name angibt.

Vom documentation:

hue(@color); // returns the `hue` channel of @color in the HSL space 

Beispiele

.foo{ 
    color: hue(#167e8a); 
} 

// rendered as 
.foo { 
    // invalid...hence you don't see a color 
    color: 186; 
} 

Bevor Sie weitermachen, ist es erwähnenswert, dass die spin() function Farbton ändern wird, ohne dass Sie die Farbteile zerlegen. Insbesondere wird "der Farbtonwinkel einer Farbe in jeder Richtung gedreht".

Auch wenn Sie HSL manuell abbrechen möchten, ist es einfach.

@h: hue(#167e8a); 
@s: saturation(#167e8a); 
@l: lightness(#167e8a); 

.foo{ 
    color: hsl(@h,@s,@l); 
} 

// rendered as 
.foo { 
    color: #167d88; 
} 

Noch wichtiger ist, können Sie die extrahierten Kanäle nehmen, diese ändern und neu erstellen anschließend die Farbe:

@h: hue(#167e8a) + 40; 
@s: saturation(#167e8a) - 5; 
@l: lightness(#167e8a) + 30; 

.foo{ 
    color: hsl(@h,@s,@l); 
} 

// rendered as 
.foo { 
    color: #5978de; 
}