CSS değişkenleri nelerdir?
CSS değişkenleri veya CSS özel özellikleri, bir CSS projesinde yeniden kullanılabilir değerler bildirmenin bir yoludur. CSS değişkenleri kodun tekrarını büyük ölçüde azaltabilir ve "#accent-color" gibi temsil ettikleri gerçek değere karşılık "# b5838d" gibi stil sayfalarımızda daha anlamsal olarak anlamlı adlara başvurmamıza olanak tanır.
CSS değişkenleri nasıl bildirilir
CSS değişkenlerini kullanmak için, çift tire ile başa eklenen bir dize olan bir CSS özel özelliği oluşturmanız gerekir
--. Bu özellikler kapsamlıdır ve seçicilerine göre kullanılabilir. Genel olarak, seçicinin
:roottüm site boyunca geçerli olması için sözde seçici seçilmesi önerilir . Daha spesifik bir seçici seçerseniz, değişkenin değerine erişebileceğiniz yer buna göre değişir.
Aşağıda, bir stil sayfasındaki farklı renkleri temsil ettiği bildirilen 5 farklı CSS değişkenini gösteren bir örnek bulunmaktadır.
:root { --white: #fff; --accent-color: #b5838d; --dark-accent-color: #a6757f; --main-color: #6d6875; --dark-main-color: #56505f; }
Bu CSS değerlerine CSS'miz boyunca erişmek için aşağıdaki
var()yöntemi kullanabiliriz
var(--accent-color). Aşağıdaki örnek,
signupsınıfı içeren öğeyi seçer ve arka plan rengini olarak değiştirir
#b5838d.
.signup { background-color: var(--accent-color); }
Daha sonra değerini
--accent-colordeğiştirmeye karar verirsek, değeri bir CSS değişkeni ile ayarlandığından
var(--accent-color), değişkenin değerinin bildirildiği tek bir yerde değiştirmemiz gerekir. Değişkenin değeri güncellendiğinde, yeni değeri otomatik olarak her yere yansıtılacaktır
var(--accent-color). Yalnızca renkle birleştirilen çok sayıda ilgisiz öğe için rengi tek bir yerde değiştirebilmek güçlüdür.
CSS Değişkenlerinin Gücü
CSS değişkenleri, bir renk şeması ile hızlı bir şekilde oynamanıza ve bulup değiştirmeye gerek kalmadan referans verilen her yerde aynı rengi değiştirmenize izin verir. Ayrıca, renk şemaları oluştururken CSS değişkenlerini ayarlamak geliştirici deneyimini iyileştirebilir, çünkü stil sayfasının geri kalanındaki değerleri açıkça değiştirmek zorunda kalmadan temalar arasında değişken bildirim değerlerini değiştirebilirsiniz.
Aşağıda iki ekran CSS dosyasındaki bir satır değiştirilir görünüşte farkı göstermek
--accent-color: orange;için
--accent-color: #b5838d;kartın border-top mülkiyet ve kayıt düğmesi için arka plan rengini - iki tamamen ayrı yerlerde kullanılır. Stil sayfaları büyüdükçe ve değerler baştan kullanıldıkça bu çok yararlı olabilir.