CSS Var() İşlevi ve Değişkenler

CSS'te değişken tanımlamaya ve bu değişkenleri istediğimiz yerlerde kullanmamızı sağlayan bir özelliktir. CSS'te var() işlevini kullanmak için bir değişken tanımlanması gerekir. Global ve local değişken belirleyebilirsiniz.

CSS'te değişken tanımlamak için -- başında çift tire kullanılır. örnek --main-color:blue; gibi. CSS değişken isimleri büyük ve küçük harfe duyarlıdır. --main-color ile --Main-Color değişkenleri tarayıcılar tarafından farklı değişken ismi olarak algılanmaktadır.

Global Değişkenler

:root Pseoudo Class Kullanımı

Global yani genel CSS değişkenleri :root{} içerisinde tanımlanır ve istenilen her yerde ve her öğe için tanımlanabilir. :root{} içerisinde tanımlanan değişken istenilen yerde öğeye css-property: var(--degisken-ismi) şeklinde tanımlanır.

Aşağıdaki örnekte global bir değişkenin nasıl oluşturulduğunu ve div öğesi içerisinde nasıl tanımlandığını inceleyiniz.

:root{
    --main-color:blue;
}
/* Tanımlanan Değişken var() işlevi ile öğeye tanımlanır */
div{
    background-color: var(--main-color);
}
                    

Yerel Değişkenler

Yerel yani local CSS değişkenleri :root{} içerisinde değil de bir öğeye tanımlı olarak oluşturulan değişkenlerdir.

Örnek olarak div.example{--main-color: pink} şeklinde sadece example classname içeren div öğesi ve onun alt öğeleri için kullanıldığında değeri geçerli olacaktır. local değişkenler alt öğelere miras kalma özelliğine sahiptir.

:root{
    --main-color:blue;
}
/* Tanımlanan Değişken var() işlevi ile öğeye tanımlanır */
div.example{
    --main-color: pink;
    background-color: var(--main-color); /* Öğenin arka pla rengi pink olacaktır */
}
                    

Responsive Media Query İle Kullanımı

Global ve yerel değişkenleri responsive media sorguları ile kullanabilirsiniz.Örnek olarak aşağıda tek bir yerel ve global değiştirilerek mobil ve desktop cihazlar için site genelinde tasarıma müdahele etmenize olanak sağlar.

:root{
    --main-font-size: 30px;
    --main-color: blue;
}
.container{
    font-size: var(--main-font-size);
    --main-color: green;
}
/* 450px ve altı görüntü alanında hem genel değişkeni hem de yerel değişken değişiyor */
@media screen and (max-width: 480px){
    :root{
        --main-font-size: 18px;
    }
    .container{
        --main-Color: red;
    }
}

                    

Calc() İşlevi İle Birlikte Kullanımı

CSS değişkenlerini calc() işlevi ile birlikte tanımlayabilirsiniz. Aşağıdaki örnekte margin-bottom değerini --spacing değişkeninin 3 katı olarak tanımlayalım.

:root{
    --spacing: 1rem;
}
div.example{
    margin-bottom: calc(var(--spacing) * 3); /* Margin Bottom Değeri = 3rem olacaktır */
}
                

Yedek Değişken Değeri Tanımlama

Yedek değişken değeri (fallback) tanımlamak henüz bir --degisken tanımlanmadı ise nasıl davranması gerektiğini belirtmek için kullanılır. Her değişken "," ile ayrılmalıdır ve ilk yazılan değişkenden soraki değişkenler yine var içerisinde tanımlanmalıdır. Yoksa işlevi geçersiz olacaktır.

.container{
    color: var(--main-color, red); /* Eğer --main-color tanımlı değil ise "red" olacak */
}
.container{
    color: var(--main-color, var(--main-color2, red)); /* Eğer --main-color ve --main-color2 tanımlı değil ise "red" olacak */
}
.container{
    color: var(--main-color,--main-color2, red); /* "--main-color2, red" ifadesi geçersizdir yukarıdaki gibi var() içerisinde yazılmalıdır. */
}