Css’te Değişken Tanımlama

Image for post
Image for post

Ö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

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

: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

/* 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

/* 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

Image for post
Image for post

Güncel destek durumunu aşağıdaki adresten takip edebilirsiniz. 👇

Desteklemeyen Browserlar İçin

/* CSS */
@support(--color: red){
header{
background: --color;
}
}

Variables : Preprocessors vs Pure Css

➩ 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.

Written by

Front End Developer @SpinmaticEnt

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store