MNIEJ: odcień, nasycenie i lekkość - jak używać?

Question

Próbujesz MNIEJ przez kilka dni. Przyszedłem z problemem z HSL - Hue-Saturation-Lightness, lub może to być problem mojego zrozumienia, obawiam się.

Próbowałem następujący kod HTML:

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

i próbował słabiej odpowiednio:

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

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

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


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

ale pierwsze trzy klasy pokazując pusty, nie widać nic - brak koloru tła. Ale pudełko przyjmuje szerokość & wysokości.

Co Photoshop zrobił dla mnie:

Sprawdziłem kod koloru w Photoshop ze zmianami w HSL, wszyscy pokazano różne kolory w różnych kombinacjach. Dlaczego więc MNIEJ mnie oszukuje?

Answer 1

Funkcje HSL LESS nie zwracają koloru, a raczej liczbę całkowitą dla koloru część, którą wskazuje nazwa.

Z documentation:

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

Przykłady

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

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

Zanim przejdziemy dalej, warto wspomnieć, że spin() function zmieni barwę, nie wymagając, aby rozbić części kolorów. W szczególności "obróci kąt barwy koloru w dowolnym kierunku."

Nawet jeśli chcesz ręcznie złamać HSL, jest to proste.

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

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

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

Co ważniejsze, można wziąć wyodrębnione kanały, modyfikować je, a następnie odbudować kolor:

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

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

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