LESS: ton, doygunluk ve hafiflik - nasıl kullanılır?

Question

Birkaç gün için daha az çalışıyorum. HSL - Hue-Saturation-Lightness ile ilgili bir problemle karşılaştım ya da korkarım ki bu benim anlayışımın bir sorunu olabilir.

Aşağıdaki HTML çalıştı:

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

Ve AZ buna göre çalıştı:

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

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

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


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

Ama boş gösteren gelmez bir şey gösteriyor ilk üç sınıfları - hayır arka plan rengini. Ancak kutu genişlik & yükseklik alıyor. Photoshop benim için yaptıkların

:

ben HSL değişiklikler Photoshop renk kodu kontrol, hepsi farklı kombinasyonda farklı renkler gösteren. Öyleyse neden LESS beni aldatıyor?

Answer 1

HSL LESS işlevleri, ismin belirttiği bölüm renk için bir tamsayı değeri değil, bir renk döndürmez. documentation itibaren

:

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

Örnekler

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

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

ileriye gitmeden önce, spin() function renk parçalarını yıkmak olduğunu gerektirmeden tonu değiştirir söylemeden geçmeyelim. Spesifik olarak, "bir rengin ton açısını her iki yönde döndürecektir."

HSL'yi manuel olarak parçalamak isteseniz bile, bu basittir.

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

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

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

Daha da önemlisi, sen çıkarılan kanalları almak değişiklikleri yapabilir ve daha sonra rengi yeniden oluşturabilirsiniz:

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

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

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