CSS Değişkenleri Nedir ve Nasıl Kullanılır?

Yayınlanan: 2022-02-16

Siteniz için CSS kodu yazarken, geliştirme sürecini hızlandırmak için CSS Özel Özelliklerinden (Değişkenler) yararlanabilirsiniz. Değişkenleri, daha sonra birkaç öğeye uygulanabilecek özellikleri (boyut, renk) tanımlamak için kullanabilirsiniz.

Bu şekilde, kod ve tasarım üzerinde daha fazla kontrole sahip olmak mümkündür. Bir değişkenin değerini bir yerde değiştirmek, çağrıldığı her yerde o özelliğin değerini geçersiz kılar.

Bu gönderi, CSS Değişkenlerinin ve bazı pratik uygulamaların nasıl kullanılacağını açıklayacaktır.

Hadi başlayalım!

Değişken Bildirmek

Değişkenlerin global veya yerel kapsamı olabilir. Global olarak bir değişken tanımlamak için :root seçicisini kullanırsınız.

 :root { --base-font-size: 1.1rem; }
POPUP'TA AÇ
 :root { --base-font-size: 1.1rem; }

:root seçici, bizim özel durumumuzda belgenin köküyle, yani <html> ile eşleşir.

Bir CSS Özel Özelliği (Değişken) bildirmek için iki tire (--) ile başlarsınız. Değişkenler büyük/küçük harfe duyarlıdır, örneğin:

--base-font-size ve --Base-Font-Size iki farklı değişkendir.

Bir değişkeni yerel olarak tanımlamak için değişkeni kullanmak istediğiniz öğenin seçicisini kullanırsınız.

 #first-container { --background: #ccc; }
POPUP'TA AÇ
 #first-container { --background: #ccc; }

Değişkeni tanımladıktan sonra onu çağırmanız gerekir.

var() işlevi

var() işlevi, tanımlanan CSS Değişkeninin değerini eklemek için kullanılır. Fonksiyon kendini değişkenin değeri ile değiştirir. Bir örneğe bakalım:

HTML Kodu

  • Bu kodu kopyalayıp kod düzenleyicinize yapıştırın.
  • Dosyayı index.html olarak kaydedin .
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>
POPUP'TA AÇ
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>

CSS Değişkenleri Nedir ve Nasıl Kullanılır?

CSS Kodu

  • style.css adlı bir dosya oluşturun (aynı index.html dizininde).
  • Aşağıdaki kodu yapıştırın ve dosyayı kaydedin.
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }
POPUP'TA AÇ
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }

CSS Değişkenleri Nedir ve Nasıl Kullanılır?

Burada dikkat edilmesi gereken bazı şeyler var:

  1. Bir renk paleti oluşturmak basit bir işlemdir.
  2. Border değişkenlerinin tanımındaki renk gibi başka bir değişkenin tanımı içinde bir değişken kullanmak mümkündür.
  3. Değişkenler miras alınır, .container-* öğesinin color özelliği doğrudan alt öğelerini etkiler. Bu durumda, <p> öğesi.

Bir değişkeni geçersiz kılmak için, onu kabının içinde ilan ederek daha belirgin hale getirirsiniz.

  • CSS kodunu düzenleyin :
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }
POPUP'TA AÇ
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }

CSS Değişkenleri Nedir ve Nasıl Kullanılır?

Değişkenler ve Medya Sorguları

Değişkenler ayrıca CSS medya sorgularında devralınabilir ve geçersiz kılınabilir.

  • Bu kodu değişkenlere ekleyin :
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }
POPUP'TA AÇ
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }

Sarmalayıcı eleman için bir taban genişliği tanımladık. Artık bu değişkenleri .wrapper width özelliğine uygulayabiliriz.

  • Bu kodu CSS dosyasının sonuna ekleyin :
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }
POPUP'TA AÇ
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }

CSS Değişkenleri Nedir ve Nasıl Kullanılır?

Ekran genişliği 1100 pikselden küçük olan cihazlar için medya sorgusu tanımlamak için aşağıdaki medya sorgusunu yazıyoruz.

  • CSS kodunu düzenleyin :
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }
POPUP'TA AÇ
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }

CSS Değişkenleri Nedir ve Nasıl Kullanılır?

CSS Değişkenleri Nedir ve Nasıl Kullanılır?

Medya sorgusundaki yeni değişken tanımı, değerini geçersiz kılar. Ayrıca, değişkenin DOM'da mevcut olduğuna dikkat edin; bu, JS ile alınabileceği ve değiştirilebileceği anlamına gelir. Bu, CSS ön işlemcileri içindeki değişkenlerle mümkün değildir.

Özet

Değişkenler, küçük ve büyük miktarlardaki CSS'yi düzenlemek ve yönetmek için kullanışlıdır. Tekrarı azaltırlar ve bu nedenle hataları önlerler. CSS Değişkenleri dinamiktir, yani çalışma zamanında değiştirilebilirler. Bir siteyi veya uygulamayı CSS değişkenleriyle dinamik olarak temalandırmak kolaydır. Özelleştirilmiş bir adla bir CSS özelliğine değer atama olanağı sağlarlar. Değişkenler standart basamaklama kurallarını takip eder, bu nedenle aynı özelliği farklı özgüllük seviyelerinde tanımlamak mümkündür.

Umarım bu öğreticiyi beğenmişsinizdir. Okuduğunuz için teşekkürler!