CSS’te değişkenler (variables), bir değerin bir kelime ile adlandırılmasıdır ve bu değer daha sonra kodunuzda kullanılmak üzere saklanır. CSS değişkenleri, kodunuzu daha okunaklı ve düzenli hale getirir ve aynı değerleri tekrar tekrar yazmak zorunda kalmamanızı sağlar. Örneğin, bir web sitesinin renklerini değiştirirken, tüm renklerin değerlerini tek tek değiştirme zahmetine girmek yerine, sadece bir değişken tanımlayarak tüm renkleri tek seferde değiştirebilirsiniz.
CSS değişkenleri, bir “–” ön ekine sahip ve tüm CSS dosyalarında kullanılabilir. Örneğin, bir “renk” değişkeni tanımlamak için aşağıdaki gibi bir kod yazabilirsiniz:
:root {
--renk: #ff0000;
}Bu değişken, tüm dosyadaki tüm elementler için kullanılabilir. Örneğin, bir elementin arka plan rengini değiştirmek için aşağıdaki gibi bir kod yazabilirsiniz:
.element {
background-color: var(--renk);
}CSS değişkenleri, aynı zamanda JavaScript ile de kullanılabilir. Örneğin, bir elementin rengini JavaScript kodu ile değiştirmek için aşağıdaki gibi bir kod yazabilirsiniz:
document.documentElement.style.setProperty('--renk', '#00ff00');Bu şekilde, bir elementin rengini CSS değişkenleri kullanarak değiştirebilir ve JavaScript kodunuzla bu değişkenleri dinamik olarak değiştirebilirsiniz.