CSS Değişkenleri - var() İşlevi
CSS Değişkenleri
İşlev var(), 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.
Konu tasarımınızın renkleri olduğunda CSS değişkenlerini kullanmanın iyi bir yolu. Aynı renkleri defalarca kopyalayıp yapıştırmak yerine değişkenlere yerleştirebilirsiniz.
Geleneksel Yol
Aşağıdaki örnek, bir stil sayfasında bazı renkleri tanımlamanın geleneksel yolunu gösterir (her belirli öğe için kullanılacak renkleri tanımlayarak):
Örnek
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;
}
var() İşlevinin Sözdizimi
İşlev var(), bir CSS değişkeninin değerini eklemek için kullanılır.
İşlevin sözdizimi var()aşağıdaki gibidir:
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
Not: Değişken adı iki tire (--) ile başlamalıdır ve büyük/küçük harf duyarlıdır!
var() Nasıl Çalışır?
Her şeyden önce: 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 bildirin. Seçici :root, belgenin kök öğesiyle eşleşir.
Yerel kapsamlı bir değişken oluşturmak için onu kullanacak seçicinin içinde bildirin.
Aşağıdaki örnek, yukarıdaki örneğe eşittir, ancak burada var()işlevi kullanıyoruz.
İlk olarak, iki global değişken tanımlıyoruz (--blue ve --white). Ardından,
var()stil sayfasında daha sonra değişkenlerin değerini eklemek için işlevi kullanırız:
Örnek
: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;
}
var() kullanmanın avantajları şunlardır:
- kodun okunmasını kolaylaştırır (daha anlaşılır)
- renk değerlerini değiştirmeyi çok daha kolay hale getirir
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:
Örnek
: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;
}
Tarayıcı Desteği
Tablodaki sayılar,
var()işlevi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() İşlevi
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |