CSS değişken Ekleme

Bir websitesinin CSS kodlarını yazarken aynı renk kodlarını genelde birden fazla şekilde kullanırız. Herhangi bir değişiklik yaptığımız zaman hepsini teker teker değiştirmemiz gerekir. Fakat değişken ekleyerek bu sorunu ortadan kaldırabiliriz ve bu değişken ekleme işlemini yaparken saf CSS kullanacağız.

:root{
    --color: red;
    --div-font: "Georgia";
}
div{
   background-color: var(--color);
   font-family: var(--div-font, "Arial", serif);  
                // font-family: "Georgia", "Arial", serif;
}

Burada root{} tanımlaması yaparak bütün html üzerinde geçerli bir tanımlama yaptık.Ayrıca

#item{ } veya .box{} şeklindede özel olarakda bir id veya class içinde tanımlama yapabiliriz.

Yanında Birim Olan Propertylerde Kullanım

“px” gibi birimlerle kullanılan değerlerde kullanım biraz farklı.

:root{
   --space: 10;
}
.box{
   padding: calc(var(--space) * 1px);
}
/*calc() fonksiyonu kullanarak geçerli hale getirilir.*/

Css Değişkenleri ve JavaScript

JavaScript ile css değişkenlerine erişebilir, okuyabilir, değişiklikler yapabilirsiniz.

const box = document.querySelector('.box'); 
// Classı box olanı seçtik.
const boxStyles = getComputedStyle(box); 
// Box'ın style'ına eriştik.
const boxColor = boxStyles.getPropertyValue(--box-color); 
// Eriştiğimiz style'lerden --box-color değerini aldık.
boxColor.style.setProperty(‘--box-color’, #ccc);  
// set ile yeni özellik eklemiş olduk.