CSS değişkenlerini anlama (ve bunların nasıl kullanılacağını)
Yayınlanan: 2025-07-13CSS değişkenleri yeniden kullanılabilir tasarım bileşenleri gibidir. Bunları bir kez, marka renkleri, yazı tipi boyutları veya boşluk olarak tanımlarsınız ve daha sonra ihtiyaç duyulduğunda bunları kullanırsınız. Sizi farklı bölümlere aynı onaltılık kodları ve piksel değerlerini yazmaktan kurtarırlar.
En büyük faydaları, güncellemenin ne kadar kolay olduklarıdır. Bir değişkeni bir kez güncellerseniz, kullanıldığı her yer de değişiklikleri yansıtır. Bu nedenle, yalnızca birden fazla bölümde aynı değerleri manuel olarak tekrarlamaktan kaçınmazsınız, aynı zamanda yalnızca bir değeri değiştirerek web sitesinin görünümünü de değiştirebilirsiniz.
İşte daha da iyi hale geliyor: Divi 5 ile CSS değişkenlerini kullanmak için herhangi bir kod yazmanıza gerek yok. Divi'nin tasarım değişkenleri bunları görsel, kodsuz bir iş akışında kullanmanıza izin verir. Nasıl çalıştığını merak ediyor musunuz? Okumaya devam edin.
- 1 CSS değişkenleri nelerdir?
- 1.1 CSS değişkenleri nasıl çalışır?
- 1.2 CSS Değişkenlerini Anlama
- 1.3 Yedek Değeri Ekleme
- 2 Divi 5'te CSS değişkenlerini kullanmanın kodsuz bir yolu
- 2.1 Divi 5'teki CSS değişkenlerini tanımlayın
- 3 Divi 5, CSS değişken iş akışlarını nasıl zahmetsiz hale getirir
- 3.1 1. Tasarım çerçevenizi oluşturun
- 3.2 2. Esnek stil için seçenek grup ön ayarlarını kullanın
- 3.3 3. Daha fazla kontrol için özel CSS değişkenlerini bildirin
- 4 Divi, CSS değişkenleri için yerleşik bir yaklaşım sunar
CSS değişkenleri nelerdir?
CSS değişkenlerini kendi tasarım alışkanlıklarınız için oluşturduğunuz özel etiketler olarak düşünün. Gitme görüntüsü sınır yarıçapınız nedir? Bölümler arasında genellikle ne kadar boşluk bırakıyorsunuz? Her yerde kullandığınız bir imza düğmesi renginiz var mı? Tüm bu benzersiz stilleri CSS değişkenlerine dönüştürebilirsiniz.
Bunlar, tarayıcının varsayılan olarak bildiği değerler değildir. Her şey özeldir. Adına karar verirsiniz, tercih ettiğiniz değeri atarsınız ve istediğiniz yerde kullanırsınız. Bu, stili daha hızlı, daha temiz ve daha sonra güncellemeyi daha kolay hale getiren kendi stenografinizi yaratmak gibidir.
Bir örnek alalım. Sitenizin birincil renginin #007BFF olmasını istediğinizi varsayalım. Bunu şöyle ilan edersiniz:
:root {
--primary-color: #007bff;
}
Burada, “–Bir-Renk” değişken adınızdır ve “#007BFF” değeridir. Tarayıcının şimdi tanıyabileceği özel bir etiketin içinde bir renk sakladınız.
Kullanmak için altıgen kodunu yeniden yazmazsınız. Var () işlevinin içindeki değişkeni şöyle çağırıyorsunuz:
button {
background-color: var(--primary-color);
}Bu bir kod satırı, düğmenizin değeri her zaman –Primary Color'dan çekmesini sağlar.
Şimdi, ihtiyaç duyulan her yerde kullanabilirsiniz ve marka renginizi güncelleme zamanı geldiğinde, düzinelerce dosyayı kazmanıza gerek yoktur. Değişkeni bir kez değiştirin ve kullanıldığı her öğe otomatik olarak güncellenir. Örneğin, düğmeleriniz, başlıklarınız ve sınırlarınızın tümü kullanılır – Tek bir düzenleme hepsini günceller.
CSS değişkenleri site çapında güncellemeleri bu şekilde basitleştirir.
CSS değişkenleri nasıl çalışır?
Bir CSS değişkeni bildirmek için temel sözdizimi şuna benziyor:
.root {
--name: value;
} Dikkat edilmesi gereken birkaç şey. İlk olarak, bir CSS değişkeni her zaman iki çizgi ile başlar ( -). Tarayıcı, tasarım sisteminiz için tanımladığınız bir şey olan özel olduğunu bilir.
Yazı tipi boyutu, renk veya dolgu gibi yerleşik CSS özelliklerinin zaten anlamı vardır. Tarayıcı onlarla tam olarak ne yapacağını biliyor. Ancak özel özellikler, bir değer atayana kadar boş etiketlerdir. Bir web sitesi projesinde kendi tasarım kurallarınızı oluşturuyorsunuz-Primary Color ve tarayıcıya neyi temsil ettiğini anlatıyorsunuz.
CSS değişkenlerinizi tanımladığınız yerde de büyük bir fark yaratır.
Bunu: kök seçicinin içine yerleştirdiğinizde (yukarıda yaptığımız gibi) küreselleşir. Bu, değişkeni herhangi bir sayfada ve öğede kullanabileceğiniz anlamına gelir. Bunun nedeni: Kök, HTML'nizin üst düzey öğesini, genellikle <html> etiketini hedefler.
Ancak belirli bir sınıf veya seçici içinde aynı değişkeni tanımlarsanız, yalnızca bir noktada çalışır. Bunun gibi:
.card {
--bg-color: #f4f4f4;
} Burada, –bg-color yalnızca .Card seçicisinin içinde geçerlidir. Başka bir yerde kullanmayı deneyin ve görünmeyecek. Örneğin, aşağıda iki kart göreceksiniz.
Kart 1, .Card konteynerinin içinde bildirilen yerel olarak tanımlanmış bir değişken –Card-BG kullanır. Bu değişken yalnızca bu konteynerin içinde çalışır. Kart 3'te geçerli değildir.
Kart 2, diğer taraftan, arka planını –Global renkten çeker, bu da tanımlanmıştır: kök. Bu yüzden Kart 4 de aynı rengi alır. Global değişkene erişimi vardır.
En iyi uygulama olarak, tüm sitenizde tutarlılık istiyorsanız, her zaman CSS değerlerini tanımlayın: root. Ya bir değişkeni yerel olarak tanımlarsanız ve unuttuysanız, ama şimdi beklendiği gibi çalışmıyorsa? Bir geri dönüş değeri ayarlayarak bunu gidereceksiniz. Bir süredir bunun hakkında konuşacağız.
CSS değişkenlerini anlamak
“Cascade” terimine aşina olabilirsiniz. Peki, CSS değişkenleri de basamaklı, ama bu ne anlama geliyor?
Bir değişken hem küresel olarak (in: root) hem de yerel olarak (bir sınıfın veya konteynerin içinde) tanımlanmışsa, tarayıcı her zaman öğeye daha yakın olanı kullanır. Basamaklı CSS'de böyle çalışır. Daha yakın kurallar öncelik alır.
Ve karanlık mod tam olarak böyle çalışıyor.
Örneğin, tanımlayabilirsiniz. Ancak bir .dark-mod kabının içinde, beyaz olarak yeniden tanımlayabilirsiniz. Bu nedenle, kullanıcı Dark Mode seçeneğinde geçiş yaptığında, tarayıcı değişken adı aynı kalsa bile .dark-mode içindeki yerel sürümü kullanır.
Bu, stilleri bağlama göre ayarlarken adlandırmanızı tutarlı tutmanızı sağlar. CSS değişkenlerinin basit yeniden kullanılabilirliğin ötesine geçmenin bir yolu. Nerede ve nasıl kullanıldıklarına göre uyum sağlarlar.
Bir geri dönüş değeri eklemek
Bazen, mevcut olmayan bir CSS değişkenine başvurabilirsiniz. Belki sadece belirli bir bölümün içinde tanımlanmıştı veya yanlışlıkla kaldırıldı. Bu olduğunda, tarayıcı ne yapacağını bilmiyor. Bu değişkene bağlı stiller basitçe uygulanmayacaktır.
Bunu önlemek için doğrudan Var () işlevinin içine bir geri dönüş değeri ekleyebilirsiniz. Orijinal değişkenin eksik olması durumunda yedekleme görevi görür. İşte böyle çalışıyor:
h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
} Bu, tarayıcıya varsa, başlık rengini kullanmasını söyler. Değilse, bunun yerine siyah (#000) kullanın.
Yıkarlar, özellikle yeniden kullanılabilir bileşenler oluştururken veya değişkenlerin her zaman mevcut olmayabileceği birden fazla bölümde çalışırken kullanışlıdır. Tasarımınızı sabit ve tutarlı tutarlar.
Renk: var (–Accent-color, var (–Primary Color, #333)) gibi geri dönüşleri bile zincirleyebilirsiniz;
Burada tarayıcı önce –Accent-color'u kontrol eder. Eğer eksikse, primer renk dener. Bu da eksikse, varsayılan olarak #333. Bu, stillerinize bir güvenlik ağı verir, böylece bazı değerler eksik olsa bile doğru hale getirmeye devam ederler.
Divi 5'te CSS değişkenlerini kullanmanın kodsuz bir yolu
CSS değişkenleri (küresel kontrol, yeniden kullanılabilir değerler, basamaklı mantık) hakkında gördüğünüz her şey harika geliyor, ancak aynı zamanda bir yakalama ile birlikte geliyor: kodu yazmanız ve yönetmeniz gerekir. Birçok tasarımcı için bu ideal değil. Ya görsel tasarımı tercih ederseniz? Bu, CSS değişkenlerini kullanamayacağınız anlamına gelir, değil mi? Yanlış.
Divi 5, aynı CSS değişkenleri mantığı ile çalışmak için daha hızlı, daha görsel bir yol sunar. Divi oluşturucuya inşa edilen CSS değişkenlerine kodsuz bir alternatif olan tasarım değişkenlerini tanıtmaktadır.
YouTube kanalımıza abone olun
Tasarım değişkenleri ( CSS değişkenleri gibi) bir kez tanımladığınız ve sitenizde kullandığınız yeniden kullanılabilir değerlerdir . Farklı olan, bunu nasıl yaptığınızdır. Bunları web sitenizin stil sayfasında, ancak Divi Builder içindeki değişken yöneticide görsel olarak tanımlamıyorsunuz.
CSS değişkenleri gibi, bir tasarım değişkenine bir ad verir ve bir değer atarsınız. Kaydettikten sonra, bu mülkü destekleyen herhangi bir modülde kullanılabilir hale gelir.
Kaydedilen değişkeni uygulamak da kolaydır. Modülün ayarları seçeneğinin üzerine gelerek, kaydedilen tüm değişkenlerinizi doldurmak için üzerine tıklayarak ve uygulamak istediğiniz kişiyi seçerek değişken yönetici simgesini bulun.
Tasarım değişkenlerinin en iyi yanı, sadece tasarım değerleri değil, aynı zamanda görüntüler, bağlantılar ve metin dizeleri gibi tekrarlanabilir içerik değerlerini de kaydedebilirsiniz. Bu şekilde, web sitenizdeki ortak içerik öğelerini manuel çalışma olmadan yeniden kullanarak tekrarlanan içeriği etkin bir şekilde yönetirsiniz.
Divi 5'in tasarım değişkenleri hakkında her şeyi öğrenin
Divi 5'te CSS değişkenlerini tanımlayın
Bu, tasarım değişkenlerinin CSS değişkenlerinin yerini alıyor mu? Tam olarak değil.
Tasarım değişkenleri, marka renkleri gibi sık sık kullandığınız değerleri saklamak için mükemmeldir, ancak her stilin küresel olması gerekmez. Özellikle tek bir sayfaya özgü olduğunda, her küçük tweak'ı bir tasarım değişkeni olarak kaydetmek istemeyeceksiniz.
Diyelim ki özel bir kahraman bölümüne sahip bir açılış sayfası oluşturuyorsunuz. Yükseklik, sitedeki herhangi bir şeyden farklıdır ve onu yeniden kullanmanız olası değildir. Bir tasarım değişkeni olarak kaydetmek küresel kütüphanenizin en iyi kullanımı değildir. Bu durumda, bir CSS değişkenini doğrudan sayfa ayarlarında tanımlamak daha temiz bir seçimdir.
Aynı şey karmaşık veya tek seferlik düzenler için de geçerlidir. Belki de sadece bu bağlamda ilgili olan özel bir vurgu rengine veya düzene özgü bir aralık değerine ihtiyacınız vardır. Sisteminizi asla yeniden kullanmayacağınız değişkenlerle kalabalıklaştırmak yerine, CSS değişkenlerini tam olarak ihtiyaç duyduğunuz yerde tanımlayabilirsiniz.
CSS değişkenlerini tasarım değişkenleriyle değiştirmenizi istemiyoruz. Her ikisinin de en iyisini kullanmanızı istiyoruz.
Bu yüzden Divi 5, CSS değişkenlerini tanımlamayı kolaylaştırır. Sayfa Ayarları> Gelişmiş> Özel CSS içindeki kendi CSS değişkenlerinizi kolayca bildirebilirsiniz, tıpkı normal CSS'de olduğu gibi.
Ancak sizin için uygulamalarını basitleştiriyoruz. Tanımlandıktan sonra, bu değişkenleri bu sayfada kullanabilirsiniz. Herhangi bir modüle gidin, Gelişmiş Birimler açılır menüsünden CSS VAR'ı seçin ve Var () işlevinin içindeki değişken adını girin.
Bu yaklaşım, her şeyi görsel tasarım değişken sistemine taahhüt etmeye zorlamadan gerektiğinde size esneklik sağlar. Yapı ve yaratıcı özgürlük arasında bir denge.
Divi 5'te CSS değişkenlerini kullanma
Divi 5, CSS değişken iş akışlarını nasıl zahmetsiz hale getirir?
Artık CSS değişkenlerinin ne olduğunu ve Divi 5'in onları görsel olarak nasıl desteklediğini bildiğinize göre, işte bu gerçekten önemli. Sadece Divi size CSS değişkenlerini kullanmanın iki yolunu vermediği için değil. Çünkü onları iş akışınızla sorunsuz bir şekilde entegre etmeleridir.
Tasarım değişkenleri, seçenek grup ön ayarları ve gelişmiş birimler gibi güçlü özelliklere sahip CSS değişkenlerini kolayca kullanabilirsiniz. Hala geleneksel CSS'nin tüm esnekliğini ve ölçeklenebilirliğini elde edersiniz, ancak seçmedikçe tek bir kod satırı yazmadan.
Divi 5'in bu iş akışını nasıl hayata geçirdiğini yürüyelim.
1. Tasarım çerçevenizi oluşturun
Tasarım değişkenleri gerçekten güçlüdür, çünkü tüm tasarım çerçevenizi görsel olarak oluşturabilirsiniz, bu nedenle bir sayfayı şekillendirmek yalnızca birkaç tıklama gerektirir. Yazı tipi boyutları, boşluk birimleri ve marka renkleri gibi temel tasarım öğelerinizle başlamanızı öneririz, böylece hepsini tek bir yerde tutarsınız.
Ardından, metin dizeleri, URL'ler ve görüntüler gibi sık kullanılan içeriği de kaydedebilirsiniz. Örneğin, farklı bölümler, sosyal medya bağlantıları, e -posta, adres, vb.
Çerçevenizi yerine getirdikten sonra her şey kolaylaşır. Bir değişken bulmak veya tam adları hatırlamak için bir kök stil sayfasına geri dönmenize gerek yoktur. Divi bunları sizin için düzenler: Renkler sekmesindeki renkler, yazı tipi sekmesindeki yazı tipleri ve değişken yöneticinin içinde erişilebilir.
Sitenizin bir tasarım güncellemesine ihtiyaç duyduğunda, modülle modül düzenleme veya uzun bir stil sayfası aracılığıyla avlanmayacaksınız. Kaydedilen değerinizi bir kez değiştirecek ve değişiklikleriniz her örnekte anında uygulanır.
Aynı CSS düzeyinde kontrol, ancak herhangi bir şey ezberlemeye, yazmaya veya hata ayıklamaya gerek kalmadan.
2. Esnek stil için seçenek grup ön ayarlarını kullanın
Seçenek grup ön ayarları, tasarım sisteminiz üzerinde daha ayrıntılı kontrol sağlar. Sitenizde tek bir stil seti uygulamak yerine, hepsi aynı temel tasarım değişkenlerinden oluşturulan farklı kullanım durumları için birden fazla tasarım seçeneği grubu oluşturabilirsiniz.
Burada, katman stillerisiniz. Temel değerlerinizi değişken yöneticide bir kez tanımlarsınız, ardından bu değerlerden çeken ancak bunları biraz farklı şekillerde uygulayan farklı ön ayarlar oluşturursunuz. Kaydedilmiş bir değişken değerini güncellerseniz, değişiklik anında tüm ön ayarlarınızda ve uygulandıkları modülleri yansıtır.
Bu önceden ayarlanmış tasarım sistemi, sınırsız stil kombinasyonları oluşturmanıza yardımcı olur. Örneğin, ana sayfanız için bir başlık stiliniz ve her ikisi de aynı yazı tipi boyutu değişkenini kullanan ancak farklı boşluklar, ağırlıklar veya metin dönüşümleri olan blog başlıkları için başka bir başlık stiliniz olabilir.
Yapı temiz kalır. Stil tutarlı kalır. Ve gerektiğinde, ön ayarları modül seviyesinde geçersiz kılabilirsiniz. Böylece yaratıcı özgürlüğü kaybetmeden sistem çapında kontrol elde edersiniz.
3. Daha fazla kontrol için özel CSS değişkenlerini bildirin
Bildiğiniz gibi, Divi sizi gelişmiş kontrolden çıkarmaz. Kendi CSS değişkenlerinizi tanımlamak istiyorsanız, bunu sayfa ayarları> Gelişmiş> Özel CSS aracılığıyla kesinlikle yapabilirsiniz. Ama bu eğlenceli kısım değil.
Eğlenceli olan şey, sıvı, duyarlı düzenler görsel olarak oluşturmak için CLAMP () ve Cal () (gelişmiş birimler sayesinde) gibi güçlü CSS işlevlerini kullanmanıza izin vermesidir. Kaydedilen CSS değişkenlerinizi tasarım değişkenleriniz için değerler olarak da kullanabilirsiniz.
Bu, daha birbirine bağlı bir tasarım sistemi oluşturmanıza yardımcı olur. CSS mantığınız ve görsel stiliniz artık ayrı silolarda mevcut değil. CSS'de bir kez bir değer tanımlayabilir ve gerektiğinde görsel olarak çekebilirsiniz. İş akışınızı sıvınızı, ölçeklenebilir ve bakımını kolay tutar.
Bunu ezici bulabilirsiniz, ancak birlikte nasıl çalıştığını anladıktan sonra geri dönüş yoktur. Tasarım, düşünme ve inşa etme şeklinizi değiştirir. Bir değişken sistemi olarak başlayan şey hızla tasarım diliniz olur. Ve evet, bu araçlar güçlüdür, ancak sürecinizin etrafında şekillendirilmeleri gerekiyor. Acele etmeyin, tarzınıza neyin uygun olduğunu keşfedin ve sizin için çalışan bir iş akışı oluşturun.
DIVI, CSS değişkenleri için yerleşik bir yaklaşım sunar
CSS değişkenleri ile tasarım, esneklik ve karmaşıklık arasında seçim yapmak anlamına geliyordu. Divi 5, değişkenlerin, görsel kontrolün, site çapında güncellemelerin ve katmanlı mantığı sezgisel ve ölçeklenebilir bir iş akışına getirir ve getirir.
Özel CSS ve kodsuz tasarım arasında seçim yapmak zorunda değilsiniz. Projeleriniz büyüdükçe sisteminizi karıştırabilir, eşleştirebilir ve geliştirebilirsiniz. Ve bunun ne kadar pürüzsüz ve güçlü olabileceğini görünce, başka bir şekilde inşa etmeyi hayal etmek zor. Ama bunun için kontrolü ellerinize almanız gerekiyor.
Kendiniz için Divi 5'i deneyin ve size karşı değil, sizinle çalışan bir tasarım sistemi oluşturun.