Saf CSS'de CSS Değişkenleri - 5 Dakika veya Daha Kısa Sürede Başlarken

Saf CSS'deki CSS değişkenleri (veya resmi olarak: özel özellikler ), bunların nasıl kullanılacağını öğrenmek için beş dakika harcamak isteyen herkes için büyük bir zaman tasarrufu sağlar. CSS3'ten beri varlar ve tüm kullanıcıların %92'sinin onları destekleyen tarayıcıları var. CSS değişkenlerini kullanmak, mevcut stil sayfalarında veya yeni araçlarda önemli değişiklikler gerektirmez ve eski projelere kolayca uygulanabilir. Bir dosyada yüzlerce yere yazılmış bir onaltılık renk koduna sahip olmak yerine, bunu bir CSS değişkeni ile tek bir yerde tanımlamasını sağlayabilirsiniz. Büyük bir zaman tasarrufu ve stil sayfalarının daha tutarlı hale getirilmesine yardımcı olur.

Bekle, yani bu Saas veya Daha Az, değil mi?

Hayır, burada saf CSS'den bahsediyoruz, Saas, Less veya SCSS gibi bir önişlemciyle birleştirilmiş CSS değil. CSS değişkenlerini kullanmak, herhangi bir ek araç, düzenleyici veya iş akışınızda veya kullandığınız başka herhangi bir değişiklik gerektirmez. Bu nedenle, değişken içermeyen mevcut CSS dosyaları herhangi bir "özel" değişiklik gerektirmez ve karıştırabilir ve eşleştirebilirsiniz - değişkenleri yalnızca dosyanın bölümleri için veya yalnızca bazı dosyalarda projenizdir.

Saas veya Less gibi CSS ön işlemcileri de değişkenleri destekler. Ayrıca, kullanabileceğiniz çok daha fazla işlev ve seçeneğe sahiptirler. Bununla birlikte, adından da anlaşılacağı gibi, bir ön işlemciye ihtiyaç duyarlar - Saas'ta yazılan CSS'yi saf CSS'ye dönüştüren bir araç. Yalnızca değişkenlere ihtiyacınız varsa – saf CSS ihtiyacınız olan her şeye sahiptir.

CSS değişkenleri yerel bir işlevdir ve onları harika yapan da budur. Minimum çabayla, stil sayfalarınız çok daha okunabilir ve tutarlı hale gelir. Ayrıca, daha sonra yapmanız gereken herhangi bir değişikliği yapmak çok daha kolaydır - yüzlerce yerde bir renk kodunu değiştirmeniz gerektiğinde kesinlikle ara&değiştir yapmaktan daha hızlıdır .

Bazı değişkenler oluşturalım

Herhangi bir programlama dilinde olduğu gibi, değişkenleri kullanmanın iki adımı vardır : onlara değer vermek (tanımlamak) ve onları kullanmak (bu değere ihtiyacınız olan her yere koymak). Biz de aynısını yapacağız;

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

CSS dosyasında global olarak (herhangi bir yerde) bir değişken kullanmak istiyorsanız, onu :root sözde sınıfında tanımlamanız gerekir. Dosyadaki konumun önemi yok. Dosyanın başında veya sonunda olabilir. Ancak, değişkeni :root içine koymalısınız. Ad çift tire -- başlamalı ve boşluk içeremez. CSS değişkenleri, genellikle bir CSS özelliğine atadığınız herhangi bir değeri tutabilir; renkler gibi basit değerlerden arka plan veya gölge gibi kestirme özellikler için karmaşık ifadelere kadar.

Bir değişkeni kullanmak (değerini almak için) onu var() işlevine yerleştirin. Tüm değişken adlarının -- ile başladığını unutmayın. Başlamak için bilmeniz gereken her şey bu.

Yedek değerleri kullanma

Bir değişkenin tanımlanmaması durumunda, ikinci parametre olarak var() işlevine bir geri dönüş değeri sağlanabilir.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

Mülk değeri karmaşıksa endişelenmeyin. Geri dönüş parametresi virgüllere izin verir ( box-shadow örneğine bakın). Ayrıca, .custom-text içinde color için gösterildiği gibi birden çok var() işlevinin zincirlenmesine izin verir. --my-red ve --my-blue değişkenleri tanımsızsa, renk olarak kırmızı kullanılacaktır.

var() ve calc() 'ı birleştirmek de sözdiziminde herhangi bir sürpriz olmadan işe yarar. İşte yalnızca tanımlandığı sınıfta kullanılabilen yerel bir değişkeni içeren bir örnek.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

calc() ı idareli kullanın. Bu kötü bir şey değil ama aşırı kullanıldığında hata ayıklamak ve bakım yapmak oldukça sorunlu hale geliyor.

JavaScript aracılığıyla CSS değişkenlerini alma ve ayarlama

Düz JavaScript kullanarak yeni CSS değişkenleri ayarlayabilir ve değerlerine erişebilirsiniz. Bu yöntemi kullanmıyorum. Bunun yerine, öğenin sınıfını değiştirmeyi tercih ederim. Ancak, JavaScript aracılığıyla CSS değişkenlerine erişmek istiyorsanız yanlış bir şey yok. Bazı durumlarda kesinlikle kullanılabilir. JQuery'ye bağlı olanlar, kodu bir jQuery eklentisine dönüştürebilir.

Yeni bir değişken oluşturmak veya mevcut bir değişkenin değerini değiştirmek için:

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

Bir değişkene erişmek biraz daha karmaşıktır. Değişken JS aracılığıyla tanımlanmışsa, şunu kullanın:

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

Ancak, CSS ile tanımlanmışsa (ve genellikle olacaktır), bu kodu kullanın:

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

Sorunlar ve dikkat edilmesi gerekenler

Artık değişkenleri nasıl kullanacağınızı bildiğinize göre, bunlarla aşırıya kaçmayın ve stil sayfasındaki her bir özellik değeri için bir değişken oluşturun. Örneğin, bu, tüm kavramın aşırıya kaçması ve kötüye kullanılması olacaktır;

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

Hiçbir şey elde ettin. 10px yerine --spacing-10 aldım. Yakında 5 pikselden 100 piksele kadar olan her dolgu piksel değeri için yirmi değişken daha yaratacaksınız. Tutarlılık için gidiyorsanız --small-padding, --medium-padding, --large-padding gidin ve uygun sayısal değerler atayın.

CSS standardı tarafından gerekli olmamasına rağmen , tüm değişkenleri tek bir yerde ve CSS dosyasının başında tanımlamanızı içtenlikle öneririm . Bu şekilde, nerede olduklarını her zaman bileceksiniz ve değerleri hızla değiştirebileceksiniz. Tanımları dosyanın her yerine dağıtırsanız, bir şeyleri takip etmekte zorlanacaksınız ve aynı değişkeni birden çok yerde tanımlamanız gerekebilir. Hata ayıklamak eğlenceli bir iş olmayacak.

CSS değişkenlerini kullanmamak için hiçbir neden yok

İnternette işler hızlı ilerler (çerezlerin yerel depolama ile değiştirilmesi gibi). Büyük projeler ve büyük ekipler için Saas gibi CSS ön işlemcilerine geçmek doğru yoldur. Ancak, daha küçük projeler veya bakım gerektiren mevcut projeler için , saf CSS'deki CSS değişkenleri doğru çözümdür . Kesinlikle hiçbir değişiklik, yazılım veya araç yükseltmesi veya herhangi bir şey gerektirmezler. Bir değişken tanımlarsınız ve onu kullanmaya başlarsınız.