Css’te Değişken Tanımlama

Büşra Memiş
Jan 22, 2018 · 3 min read

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

Büşra Memiş

Written by

Front End Developer @Spinmatic

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade