CSS Değişkenleri ve calc

Bu dersin sonunda bir sitenin renklerini ve ölçülerini tek yerden yönetebilecek ve CSS içinde hesap yapabileceksiniz.

Tekrar eden değerler

Sitenizin ana rengi 40 farklı kuralda geçiyorsa rengi değiştirmek 40 düzenleme demektir. Üstelik birini kaçırmak çok kolaydır. Değişkenler bu değeri tek bir yerde tutmanızı sağlar.

Değişken tanımlamak ve kullanmak

Değişken adları iki tire ile başlar. Değeri var() ile okursunuz. Bütün sayfada kullanılacak değişkenler genellikle :root seçicisine yazılır. :root belgenin en dıştaki elemanıdır.

Değişkenin değerini değiştirin, bütün sayfa değişsin:

<h1>Okul Gazetesi</h1>
<p>Bu haftanın <a href="#">haberleri</a> yayınlandı.</p>
<button class="dugme">Abone ol</button>

:root {
  --ana-renk: teal;
  --bosluk: 16px;
}

h1 {
  color: var(--ana-renk);
}

a {
  color: var(--ana-renk);
}

.dugme {
  padding: var(--bosluk);
  border: 0;
  background-color: var(--ana-renk);
  color: white;
}

Değişken adlarında büyük ve küçük harf farklıdır: --Renk ile --renk aynı değildir. Türkçe karakter kullanmamak en güvenlisidir.

Yedek değer

Değişken tanımlı değilse var() içine virgülden sonra yazılan değer kullanılır:

.kutu {
  color: var(--vurgu, crimson);
}

Değişkenler kalıtılır

Değişkenler de color gibi içeri doğru kalıtılır. Bu yüzden bir değişkeni bir elemanda yeniden tanımlarsanız yalnızca o elemanı ve içindekileri etkiler. Bileşen çeşitleri yazmanın çok temiz bir yoludur:

<button class="dugme">Normal</button>
<button class="dugme tehlike">Sil</button>
<button class="dugme basari">Kaydet</button>

.dugme {
  --renk: teal;
  padding: 8px 16px;
  border: 2px solid var(--renk);
  border-radius: 6px;
  background-color: white;
  color: var(--renk);
}

.tehlike {
  --renk: crimson;
}

.basari {
  --renk: seagreen;
}

Her çeşit tek bir satır oldu. Bir önceki bölümdeki gibi hangi özelliklerin farklı olduğunu tek tek yazmanız gerekmedi.

Tema kurmak

Renkleri anlamlarına göre adlandırırsanız bütün bir temayı tek kuralla değiştirebilirsiniz.

<div class="tema">
  <h2>Açık tema</h2>
  <p>Değişkenler sayesinde iki tema aynı kuralları kullanıyor.</p>
</div>

<div class="tema koyu">
  <h2>Koyu tema</h2>
  <p>Yalnızca değişkenlerin değerleri farklı.</p>
</div>

.tema {
  --zemin: white;
  --yazi: #222222;
  --vurgu: teal;
  padding: 16px;
  background-color: var(--zemin);
  color: var(--yazi);
}

.tema h2 {
  margin-top: 0;
  color: var(--vurgu);
}

.koyu {
  --zemin: #1b1b1f;
  --yazi: #e8e8e6;
  --vurgu: gold;
}

Değişkenlere --mavi yerine --vurgu gibi adlar verdiğinizi fark ettiniz mi? Koyu temada vurgu rengi mavi olmayabilir. Sınıflarda olduğu gibi burada da ad, değerin ne olduğunu değil ne işe yaradığını anlatır.

calc(): Hesap yapmak

calc() farklı birimleri birlikte kullanarak hesap yapar. Tarayıcı sonucu sayfa çizilirken bulur, bu yüzden % ile px birlikte kullanılabilir.

+ ve - işaretlerinin iki yanında boşluk zorunludur. calc(100%-40px) geçersizdir.

<div class="ust">Üst bölüm (genişlik: 100% - 40px)</div>
<div class="yarim">Değişkenle hesap</div>

:root {
  --birim: 8px;
}

.ust {
  width: calc(100% - 40px);
  margin-bottom: 8px;
  background-color: lightblue;
}

.yarim {
  padding: calc(var(--birim) * 3);
  background-color: lightgreen;
}

min(), max() ve clamp()

Bu üç işlev bir değeri sınırlar. Çok yararlıdırlar, çünkü tek satırda önceden @media gerektiren işleri yapabilirler.

• min(300px, 100%) İki değerin küçüğünü kullanır.
• max(200px, 50%) İki değerin büyüğünü kullanır.
• clamp(en-az, tercih, en-çok) Tercih edilen değeri kullanır ama sınırların dışına çıkarmaz.

Kod ile önizleme arasındaki ayracı sürükleyip başlığın boyutunu izleyin:

<h1 class="baslik">Esnek başlık</h1>
<div class="kutu">En fazla 300px</div>

.baslik {
  font-size: clamp(1.5rem, 10vw, 4rem);
}

.kutu {
  width: min(300px, 100%);
  padding: 12px;
  background-color: khaki;
}

clamp yazı boyutları için çok yaygındır. Yazı küçük ekranda 1.5rem’in altına inmez, büyük ekranda 4rem’i geçmez.

<style>
  :root {
    --ana-renk: teal;
  }

  h1 {
    color: var(--ana-renk);
  }
</style>

<h1>Başlık</h1>

<style>
  .kutu {
    width: calc(100% - 32px);
    background-color: khaki;
  }
</style>

<div class="kutu">Kutu</div>

Bu derste öğrendikleriniz

• Değişkenler iki tire ile tanımlanır, var() ile okunur ve genellikle :root içine yazılır.
• Değişkenler kalıtılır, bir elemanda yeniden tanımlanarak bileşen çeşitleri ve temalar yapılabilir.
• calc() farklı birimleri birleştirir, + ve - için boşluk gerekir.
• min(), max() ve clamp() değerleri sınırlar.