LESS ile Dinamik Kontrast Renk Oluşturma

“Modern art piece featuring a halved orange with the rind painted blue on a blue background” by Cody Davis on Unsplash

Modüler css yazmak için CSS Pre-Processors’ler artık vazgeçilmez olmuştur. Ben bunun için LESS’i tercih ediyorum.

Büyük ve karmaşık yapıların bulunduğu projelerde özellikle renkler, ebatlar zaman zaman kontrolden çıkar. Bu ve benzeri durumlarda, en azından renkleri bir miktar dinamik hale getirmek benim işime geliyor; koyu arka planı olan bir nesnenin yazı rengi ne olmalıdır sorusuyla zaman kaybetmek istemiyorum. Bunu dinamik hale getirmeyi tercih ederim.

Malzelemer:

LESS,

LESS mixin,

LESS luma fonksiyonu

LESS Mixin

LESS içerisinde oluşturduğumuz küçük fonksiyonlardır; JavaScript fonksiyonlarına çok benzer.

[embed]

Yukarıdaki CSS kuralı en basit mixindir. Aşağıdaki şekilde kullanıldığında, paragrafların yazı rengi kırmızı olur.

[embed]

Mixinler içerisine parametre alabilir.

[embed]

Yukarıdaki örnekte olduğu gibi paragrafların yazı renklerini, parametre göndererek belirleyebiliriz. Ayrıca mixinler koşullara göre de sonuç üretirler; if/else gibi… Zaten bize de lazım olan bu bölümdür.

Adım adım ilerleyelim:

[embed]

Renk kodunu parametrik olarak aldık, şimdi mixini koşullu hale getirelim.

[embed]

Buradaki ”when” kelimesi “if” gibi çalışır. LESS luma fonksiyonun sonucu “50%” ye eşit ya da büyükse anlamına gelir.

LESS luma fonksiyonu ise verilen rengin (@color) ışık değerini yüzde cinsinden geri döner. Gelen değer 50 üzerinde ise ışık değeri yüksek olarak kabul ettim ve yazı rengini koyu (siyah) seçtim.

Peki ya ışık değeri düşükse?

[embed]

LESS içerisinde else olmadığı için aynı mixini, koşulları değiştirerek tekrar yazmam gerekiyor. LESS luma değeri “50%” den küçükse yazı rengini açık (beyaz) yaptım.

LESS kodlarının son hali

[embed]

Header CSS class ı çerisindeki mixin e arkpalan rengini parametre olarak gönderdim. Önce yazılmış “contrastTextColor” çalışır ve koşul sağlanıyorsa yazı rengini siyah yapar. Daha sonra ikinci “contrastTextColor” çalışır ve koşul sağlanıyorsa yazı rengini beyaz yapar.

Birçok makalede bu işlemi LESS lightness() fonksiyonu ile yaparlar fakat ben bu fonksiyonun kararlı sonuçlar üretmediğini düşünüyorum. LESS lightness() rengin hsl değerine bakıyor ve geri döndüğü sonuç yanıltıcı olabiliyor. LESS luma() ise gamma correction kullanarak bir sonuç döner ve doğruya çok daha yakındır.