Özel özellikler olarak da bilinen CSS değişkenleri, stil sayfalarınızdaki tekrarı en aza indirmenize yardımcı olur. Bu da, tasarımınızda değişiklik yaparken zamandan ve emekten tasarruf etmenize yardımcı olur. Ayrıca, güncellemeniz gereken hiçbir değeri kaçırmayacağınızdan da emin olabilirsiniz.
DOM'ye erişim, değişkenler oluşturmanıza, bunları depolamanıza ve stil sayfanız boyunca yeniden kullanmanıza olanak tanır.
CSS Değişkenleri Nasıl Tanımlanır ve Kullanılır?
Stil sayfalarınızı daha düzenli, bakım yapılabilir ve yeniden kullanılabilir hale getirmek için, değer kabul eden herhangi bir özellikte CSS değişkenlerini kullanabilirsiniz.
Aşağıdaki HTML dosyası ve CSS değişkenlerini kullanmayan CSS dosyası örneğini ele alalım.
HTML:
html>
<htmldil="tr">
<KAFA>
<başlık>CSS Değişkenleri - Düğme Varyasyonlarıbaşlık>
<bağlantırel="stil sayfası"href="Değişkenler.css" />
KAFA>
<vücut>
<div>
<h1>CSS Değişkenlerih1>
<div>
CSS:
.btn {
dolgu malzemesi: 1rem 1.5rem;
arka plan: şeffaf;
yazı tipi ağırlığı: 700;
kırmızı renk;
}
Sayfanız şöyle görünmelidir:
bu .btn Yukarıdaki stil sayfasında kullanılan sınıf dinamik değildir ve tek tek düğmeleri özelleştirmek için ayrı bir sınıf oluşturmanıza neden olur. Güzel web siteleri oluşturmak, ön uç stilinizle dinamik olmanızı gerektirir. Düğmeleri bu şekilde uygulamak, bu görevi başarması zahmetli hale getirecektir.
Çoğu programlama dilinde olduğu gibi, CSS değişkenlerini başlatmanız ve değiştirmeniz gerekir.
Bir CSS değişkenini başlatmak için değişken adının önüne çift tire koyun:
:kök{
/*CSS değişkeni*/
--variable_name: değer;
}
Bir değişkeni herhangi bir yerde başlatabilirsiniz, ancak bu değişkeni yalnızca ilklendirilen seçici içinde kullanabileceğinizi unutmayın. Bu nedenle, CSS değişkenleri geleneksel olarak kök seçici içinde başlatılır. Bu, DOM'un en üst düzey öğesini hedefler ve değişkenlerin tüm HTML belgesi tarafından küresel ölçekte erişilebilir olmasını sağlar.
Değişkeni CSS stilinize değiştirmek için, var() mülk:
:kök {
/*CSS değişkeni*/
--öncelik: #900c3f;
--ikincil: #ff5733;
}.btn {
dolgu malzemesi: 1rem 1.5rem;
arka plan: şeffaf;
yazı tipi ağırlığı: 700;
renk: var(--öncelik);
arka plan rengi: var(--ikincil);
}
.alt birincil {
renk: var(--ikincil);
arka plan rengi: var(--öncelik);
}
Kök seçici iki değişken içerir: --öncelik Ve --ikincil. Her iki değişken daha sonra .btn sırasıyla bir renk ve arka plan rengi olarak sınıflandırın.
Değişkenleri kullanarak, tek tek öğeleri çok daha kolay bir şekilde şekillendirebilirsiniz. Değişkenleri yeniden kullanarak, her durumda güncellemek için bir değeri hızlıca değiştirebilirsiniz.
bu var() property ayrıca ikinci bir bağımsız değişken alabilir. Bu bağımsız değişken, ilk bağımsız değişkenin tanımlanmadığı veya geçersiz olduğu bir durumda ilk bağımsız değişken için bir geri dönüş değeri görevi görür.
Örneğin:
:kök {
--öncelik: #900c3f;
--ikincil: #ff5733;
}
.btn {
dolgu malzemesi: 1rem 1.5rem;
arka plan: şeffaf;
yazı tipi ağırlığı: 700;
renk: var(--birincil, mavi);
}
Bu örnekte, --öncelik içine değişken renk stil. Herhangi bir nedenle bu değer başarısız olursa, stil sayfası yedek olarak ikinci değeri kullanır. Yedek değer olarak başka bir CSS değişkeni de kullanabilirsiniz.
JavaScript ile CSS Değişkenlerini Değiştirme ve Geçersiz Kılma
JavaScript kullanarak CSS değişkenlerini manipüle etmek, web sitenizin görünümünü ve hissini anında değiştirmenin güçlü bir yolu olabilir. JavaScript kullanarak bu değişkenlerin değerlerini güncelleyebilir ve sitenize yansıyan değişiklikleri görebilirsiniz.
JavaScript ile yapılan değişikliklerin yalnızca geçerli oturum için geçerli olacağını unutmamak önemlidir. Ya orijinal kaynağı güncellemelisiniz ya da yeni değeri bir tanımlama bilgisinde olduğu gibi istemcide saklayın, değişiklikleri sürdürmek için.
İşte bir CSS değişkeninin değerini güncellemek için JavaScript'in nasıl kullanılacağına dair bir örnek.
HTML:
html>
<htmldil="tr">
<KAFA>
<başlık>CSS Değişkenleri - Düğme Varyasyonlarıbaşlık>
<bağlantırel="stil sayfası"href="Değişkenler.css" />
<senaryo>
işlevrengi değiştir() {
// Değişkenini değiştirmek istediğiniz öğeyi alın
sabit öğem = belge.querySelector(":kök");// Değişkenin geçerli değerini al
izin vermek currentValue = getComputedStyle (myElement).getPropertyValue(
"--ikincil"
);
// Ayarlamak the yenideğeriçin the değişken
öğem.stil.setProperty("--ikincil", "#DAF7A6");
}
senaryo>
KAFA>
<vücut>
<div>
<h1>CSS Değişkenlerih1>
<div>
CSS:
:kök {
--öncelik: #900c3f;
--ikincil: #ff5733;
}.btn {
dolgu malzemesi: 1rem 1.5rem;
arka plan: şeffaf;
yazı tipi ağırlığı: 700;
}
.alt birincil {
renk: var(--öncelik);
arka plan rengi: var(--ikincil);
}
Bu JavaScript kodunda, rengi değiştir() işlev, kullanıcı tıkladığında ilk düğmenin rengini günceller.
kullanma DOM geçiş yöntemleri, HTML belgenizde uygulanan sınıflara veya seçicilere erişebilir ve değerleri değiştirebilirsiniz.
Düğmeye basmadan önce:
Düğmeye tıkladıktan sonra:
Yeni CSS değişkenleri oluşturmak veya bunları tamamen kaldırmak için JavaScript'i de kullanabilirsiniz.
Örneğin:
// Yaratmak A yenideğişken
belge.documentElement.style.setProperty('--yeni renk', 'mavi');
// bir değişkeni kaldır
belge.documentElement.style.removeProperty('--yeni renk');
Önişlemcilerle CSS Değişkenlerini Kullanma
Ön uç teknolojisinde değişkenlerin kullanılması, başlangıçta aşağıdakiler gibi CSS ön işlemcileriyle sağlandı: SASS, LESS ve Stylus.
CSS ön işlemcilerinin amacı, standart CSS'nin temel yeteneklerini genişleten kod geliştirmektir. Ardından, tarayıcının anlaması için bu kodun standart CSS'de derlenmesini sağlayın. TypeScript JavaScript ile nasıl çalışır?.
CSS değişkenlerinin geliştirilmesiyle, ön işlemciler artık eskisi kadar önemli değildir, ancak projenizde CSS değişkenleriyle birleştirilirse yine de bazı kullanımlar sunabilirler.
Bir SASS değişkeni tanımlayabilirsiniz. $ana-renk ve bir CSS değişkeninin değerini ayarlamak için kullanın. Ardından, normal bir stil sınıfında CSS değişkenini kullanın.
CSS değişkenlerinin değerlerini değiştirmek için SASS işlevlerini de kullanabilirsiniz.
Örneğin:
:kök {
--birincil: $ana-renk;
--ikincil: hafifletme(var(--öncelik), 20%);
}
.btn {
renk: var(--öncelik);
arka plan rengi: var(--ikincil);
}
Burada, SASS işlevi hafifletmek() değerini manipüle eder --öncelik için bir değer elde etmek --ikincil.
SASS değişkenlerine JavaScript tarafından erişilemeyeceğini unutmayın. Bu nedenle, çalışma zamanında değişkenlerinizin değerlerini değiştirmeniz gerekiyorsa, CSS değişkenlerini kullanmalısınız.
CSS değişkenlerini ve ön işlemcileri birlikte kullanarak, kullanmak gibi her iki avantajdan da yararlanabilirsiniz. döngüler ve işlevler gibi güçlü ön işlemci özellikleri ve CSS gibi CSS değişkenleri özelliği basamaklı.
Web Geliştirmede CSS Değişkenlerini Kullanmaya İlişkin İpuçları
İşte CSS değişkenlerini daha iyi kullanmanıza yardımcı olacak birkaç önemli ipucu.
Net Bir Adlandırma Kuralıyla Başlayın
Değişkenleriniz için anlaşılmasını ve kullanılmasını kolaylaştıran bir adlandırma kuralı seçin. Örneğin, gibi bir önek kullanın. --renk- renk değişkenleri için veya --aralık- aralık değişkenleri için.
Tasarımınızı farklı ekran boyutlarına göre ayarlamayı kolaylaştırmak için ortam sorgularında değişkenler kullanın.
CSS'nin Basamaklı Doğasından Yararlanın
CSS değişkenlerinin basamaklı olduğunu unutmayın, yani bir üst öğeye bir değişken ayarlarsanız, bunun tüm alt öğelerini etkileyeceği anlamına gelir.
CSS Değişkenlerini Dikkatli Kullanın
Çok fazla CSS Değişkeni kullanmak kafa karışıklığına neden olabilir, bu nedenle bunları dikkatli bir şekilde ve yalnızca mantıklı olduğunda ve kodunuzun bakımını iyileştirdiğinde kullanın.
Değişkenlerinizi Test Edin
CSS değişkenleri, stil sayfanıza net ve sürdürülebilir kod yazmanın benzersiz bir yoludur.
Tüm tarayıcılarda hala tam olarak desteklenmediklerini not etmek önemlidir. Bu nedenle, beklendiği gibi çalıştıklarından ve geri dönüş değerlerinin beklediğiniz gibi çalıştığından emin olmak için değişkenlerinizi tarayıcı uyumluluğu açısından test etmelisiniz.