CSS'de var() metodu, bir CSS değişkeninin değerini eklemek için kullanılır.

CSS değişkenlerinin DOM'a erişimi vardır; bu, yerel veya global kapsamda değişkenler oluşturabileceğiniz, değişkenleri JavaScript ile değiştirebileceğiniz ve değişkenleri medya sorgularına göre değiştirebileceğiniz anlamına gelir.

CSS değişkenlerini kullanmanın iyi bir yolu, tasarımınızın renkleri söz konusu olduğunda. Aynı renkleri tekrar tekrar kopyalayıp yapıştırmak yerine değişkenlere yerleştirebilirsiniz.

Normal Kullanım

Aşağıdaki örnek, bir stil sayfasında bazı renkleri tanımlamanın geleneksel yolunu gösterir (her etiket için renkler tek tek tanımlanmıştır):

 
<html>
<head>
<style>
body {
background-color: #1e90ff;
}
 
h2 {
border-bottom: 2px solid #1e90ff;
}
 
.container {
color: #1e90ff;
background-color: #ffffff;
padding: 15px;
}
 
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding: 5px;
}
</style>
</head>
<body>
 
<h1>Normal Kullanım</h1>
 
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
 
</body>
</html>

CSS var() Sözdimi ve Değişken Tanımlamak

CSS'de var() metodu, bir CSS'de değişken tanımlamak için kullanılır.

var() metodunun syntax (sözdizimi) aşağıdaki gibidir:

var(--name, value)
  • name - zorunludur ve değişken adı iki tire ile başlamalıdır.
  • value - İsteğe bağlı ve değişken değerini tanımlar.

Not: Değişken adı iki tire (--) ile başlamalıdır ve büyük/küçük harf duyarlıdır!

CSS var() Kullanımı

İlk önce bilmemiz gereken konu: CSS değişkenlerinin global veya yerel bir kapsamı olabilir.

Global değişkenlere belgenin tamamı üzerinden erişilebilir/kullanılabilirken, yerel değişkenler yalnızca bildirildiği seçicinin içinde kullanılabilir.

Global kapsamlı bir değişken oluşturmak için onu :root seçicinin içinde tanımlamamız gerekmektedir. :root seçicisi, belgenin kök öğesiyle eşleşir.

Yerel kapsamda bir değişken oluşturmak için, onu kullanacak olan seçicinin içinde bildirin.

Aşağıdaki örnek, normal kullanım olarak belirttiğimiz örnek ile aynıdır, ancak burada var() metodu kullanılmıştır.

İlk olarak, iki global değişken tanımlıyoruz (--blue ve --white)., sonrasında var() metodu ile değişkenleri çağırıyoruz.

 
<html>
<head>
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
 
body {
background-color: var(--blue);
}
 
h2 {
border-bottom: 2px solid var(--blue);
}
 
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
 
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
</style>
</head>
<body>
 
<h1>var() metodu ile kullanım</h1>
 
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
 
</body>
</html>

CSS'de değişken kullanmanın avantajları

  • Yazdığımız kodun okunmasını kolaylaştırır (daha anlaşılır olmasını sağlar)
  • Renk değerlerini değiştirmeyi çok daha kolay hale getirir tek bir sefer değişiklik yapıp tüm stilleri etkileyebiliriz.

Mavi ve beyaz rengi daha yumuşak bir mavi ve beyaza dönüştürmek için iki değişken değerini değiştirmeniz yeterlidir:

 
<html>
<head>
<style>
:root {
--blue: #6495ed;
--white: #faf0e6;
}
 
body {
background-color: var(--blue);
}
 
h2 {
border-bottom: 2px solid var(--blue);
}
 
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
 
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
</style>
</head>
<body>
 
<h1>var() Kullanımı</h1>
 
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
 
</body>
</html>

CSS değişkenleri geçersiz kılmak

Global değişkenlere belgenin tamamı üzerinden erişilebileceğini/kullanılabileceğini, yerel değişkenlerin ise yalnızca bildirildiği seçicinin içinde kullanılabileceğini öğrendik.

Bazen değişkenlerin sadece sayfanın belirli bir bölümünde değişmesini isteriz. 

Buton etiketleri için farklı bir mavi renk istediğimizi varsayalım. Ardından, button seçicinin içindeki --blue değişkenini yeniden bildirebiliriz. Bu seçicinin içinde var(--blue) kullandığımızda, burada belirtilen yerel --blue değişken değerini kullanacaktır.

Yerel --blue değişkeninin, düğme elemanları için global --blue değişkenini geçersiz kılacağını görüyoruz:

 
<html>
<head>
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
 
body {
background-color: var(--blue);
}
 
h2 {
border-bottom: 2px solid var(--blue);
}
 
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
 
button {
--blue: #0000ff; /* local variable will override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
</style>
</head>
<body>
 
<h1>Global değeri geçersiz kılmak</h1>
 
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
 
</body>
</html>

CSS Yerel Değişken Eklemek

Bir değişken yalnızca tek bir yerde kullanılacaksa, yerel değişken tanımlanabilir :

 
 
 
 
:root {
--blue: #1e90ff;
--white: #ffffff;
}
 
body {
background-color: var(--blue);
}
 
h2 {
border-bottom: 2px solid var(--blue);
}
 
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
 
button {
--button-blue: #0000ff; /* new local variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}