Css’te Değişken Tanımlama
Önceden değişken tanımlaması yapabilmek için ‘Sass-Less’ gibi preprocessorlar kullanmak gerekiyordu. Ama artık pure css’te de bunu yapabiliyoruz. 😍
DRY : Don’t Repeat Yourself
Değişken tanımlamaktaki amaç kendini tekrar eden kodları engellemektir. Örneğin bir web sayfasındaki birçok yerde kullanılan renk kodu gibi. İleride web sayfasının template değiştiğinde o renkleri değiştirmek için tek tek tanımlanan yerlere gelip değiştirmek bir hayli zahmetli olacak. Onun yerine renk adında bir değişken tanımlayıp renk kodunu ona atandığında; renk kodunun kullanılacak yerlere değişken adını koyarak ileride gerçekleşecek bir değişiklikte yapılacak olan tek şey değişkenin değerini değiştirmek olacaktır.
Şimdi gelelim css’te bunu nasıl kullanacağımıza.
Css’te Değişken Tanımlamak
Daha önce herhangi bir preprocessor kullanmışsanız eğer syntax size garip gelebilir.
Değişken adlarının başına çift çizgi koyarak adlandırmaya başlıyorsunuz.
/* CSS */
--color: red;⚠️ Burada bir uyarı vermek istiyorum. Normalde css propertylerinde case-sensitive olayı yoktur. Fakat değişken adlarında bu geçerli değil. Yani değişken adları case-sensitive’dir.
️--color ile --Color aynı şey değildir!Değişkene erişmek için ise var( ) keywordu kullanılır.
var( — degisken-adi, deger) kullanımı da mevcuttur.
/* CSS */
--color: red;
--div-font: "Georgia";div{
background-color: var(--color);
font-family: var(--div-font, "Arial", serif);
// font-family: "Georgia", "Arial", serif;
}
Değişken Scope
Değişken tanımlandığı yerlerde geçerlidir.
:root{ } da tanımlanan bir değişken tüm html’de geçerliyken, #item{ } da tanımlanan bir değişken sadece #item’da geçerlidir. Ona dışarıdan erişilemez.
/* CSS */
:root{
--color: red;
}#item{
--color: blue;
}p{
--color: black;
}<!-- HTML -->
<html>
<body>
<div> Bu div'in rengi kırmızıdır!</div>
<div id="item">
Bu div'in rengi mavidir!
<p> Bu p'nin rengi mavidir! Çünkü parent'ı #item'dır.</p>
</div>
<p>Bu p'nin rengi siyahtır!</p>
</body>
</html>
Farklı scopelarda aynı değişken adını farklı değerlerde kullanabilirsiniz. — color değişkeni :root, #item, p ‘de farklı değerler aldığını yukarıda görüyorsunuz.
Yanında Birim Olan Propertylerde Kullanım
“px” gibi birimlerle kullanılan değerlerde kullanım biraz farklı.
/* CSS */
:root{
--space: 10;
}.box{
padding: var(--space)px;
}
❌ Bu kullanım geçerli değildir..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.
/* JS */
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.
Browser Destek Durumu
“Ya sadece chrome destekliyordur bunu.” diye düşünüyorsanız yanılıyorsunuz! IE? Desteklemiyor. Şaşırdık mı, hayır. 😄
Güncel destek durumunu aşağıdaki adresten takip edebilirsiniz. 👇
Desteklemeyen Browserlar İçin
Desteği olamayan browserlar için ‘@support()’ kullanarak destekler hale getirebilirsiniz.
/* CSS */
@support(--color: red){
header{
background: --color;
}
}Variables : Preprocessors vs Pure Css
Preprocessorlar:
➩ için ekstra bir derleme işlemi gerçekleşecektir.
➩ dinamik olarak değiştirilemezler.
➩ Dom yapısını anlayamazlar.
➩ Js ile erişme-değiştirme gibi işlemler yapılamaz.
Pure css’te tanımlanan değişkenler için yukarıdaki durumlar geçerli değildir.
