Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Değişken Tanımlama Konusunu öğreneceğiz.
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.
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):
<!DOCTYPE html>
<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'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)
Not: Değişken adı iki tire (--) ile başlamalıdır ve büyük/küçük harf duyarlıdır!
İ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.
<!DOCTYPE html>
<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>
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:
<!DOCTYPE html>
<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>
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:
<!DOCTYPE html>
<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>
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;
}