CSS Değişkenleri - var() işlevi

İçindekiler

CSS Değişkenleri

var() işlevi bir değerin değerini eklemek için kullanılır CSS değişkeni.

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

CSS değişkenlerini kullanmanın iyi bir yolu, konu temanızın renkleridir. tasarım. Aynı renkleri tekrar tekrar kopyalayıp yapıştırmak yerine bunları değişkenlere yerleştirin.

Geleneksel Yol

Aşağıdaki örnek, bir stil sayfasında bazı renkleri tanımlamanın geleneksel yolunu göstermektedir. (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;
}

Kendiniz Deneyin →

<!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>The Traditional Way</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>

`var()` İşlevinin sözdizimi

var() işlevi bir değerin değerini eklemek için kullanılır CSS değişkeni.

var() işlevinin sözdizimi aşağıdaki gibidir:

 var(--name, value)

name: Gerekli. Değişken adı (iki ile başlamalıdır) kısa çizgiler)
value: İsteğe bağlı. Geri dönüş değeri (değişken bulunamazsa kullanılır)

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

`var()` Nasıl Çalışır?

Her şeyden önce: CSS değişkenleri global veya yerel bir kapsama sahip olabilir.

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

Genel kapsama sahip bir değişken oluşturmak için bunu :root içinde bildirin seçici. :root seçici, belgenin kök öğesiyle eşleşir.

Yerel kapsama sahip bir değişken oluşturmak için onu kullanacak seçicinin içinde bildirin.

Aşağıdaki örnek yukarıdaki örnekle aynıdır ancak burada var() fonksiyonunu kullanıyoruz.

Öncelikle iki global değişken tanımlıyoruz (--blue ve --white). Daha sonra şunu kullanırız: Değişkenlerin değerini stil sayfasına daha sonra eklemek için var() işlevi:

Ö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;
}

Kendiniz Deneyin →

<!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>Using the var() Function</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>

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 tek yapmanız gereken iki değişken değerini değiştirmek için:

Ö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;
}

Kendiniz Deneyin →

<!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>Using the var() Function</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>

Tarayıcı Desteği

Tablodaki sayılar, tarayıcıyı tam olarak destekleyen ilk tarayıcı sürümünü belirtir. var() işlevi.

Function
var()	49.0	15.0	31.0	9.1	36.0

CSS `var()` İşlev

var(): Bir CSS değişkeninin değerini ekler

CSS Değişkenleri - var() işlevi

İçindekiler