CSS Değişkenleri için Başlangıç ​​Kılavuzu (aka CSS Özel Özellikleri)

İçindekiler:

• Önişlemcilerdeki CSS Değişkenleri #
• Yerel CSS'deki Değişkenler (Özel Özellikler) #
• Neden “Özel Mülkler”? #
• CSS Değişkenleri nerede tanımlanır? #
• CSS Değişkenleri hakkında teknik notlar #
• var() işlevini anlama #
• calc() ile CSS Değişkenlerini Kullanma #
• CSS Değişkenleri ile Püf Noktaları #

Önişlemcilerdeki CSS Değişkenleri

CSS ön işlemcileri, 10 yılı aşkın bir süredir CSS Değişkenlerini kullanıyor. Burada bu seçenekler üzerinde çok fazla ayrıntıya girmeyeceğim, ancak popüler önişlemci kitaplıklarının her birinin değişkenleri nasıl kullandığını bilmenin faydalı olacağını düşünüyorum.

Sass'ta (veya SCSS'de) değişkenleri aşağıdaki gibi bildirirsiniz:

Dolar işaretine ($) dikkat edin. İlk satır, değişkenin ve değerinin bildirilmesidir. Aşağıdaki iki blok, stil sayfasında daha sonra kullanılan değişkenlerin örnekleridir.

Less.js'deki değişkenler @ sembolünü kullanır:

Ve Stylus'ta değişkenler şöyle görünür:

Bu üçüncü taraf teknolojilerini kullanan değişkenlere daha fazla bakmak istiyorsanız, yukarıda gösterilen önişlemcilerin her biri için ayrı belge bölümlerine başvurabilirsiniz.

Yerel CSS'de Değişkenler (Özel Özellikler)

Bu bizi, CSS spesifikasyonunda tanımlandıkları şekliyle CSS Değişkenlerine veya Özel Özellikler'e getirir. Düz CSS'de bir değişken bildirmek için, değişken veya özellik için seçtiğiniz özel adın önüne iki tire koyun, ardından bu değeri istediğiniz yere yerleştirmek için var() işlevini kullanın:

Bu örnekte, iki CSS değişkeni tanımladım: --main ve --accent . Daha sonra her CSS değişkenini iki farklı öğe üzerinde kullandım ve açtıkları esnekliği gösterdim.

Herhangi bir programlama dilindeki değişkenlerde olduğu gibi, bu, bir değişkeni tek bir yerde tanımlamanıza izin verir. Daha sonra bu değeri stil sayfanızın her yerinde değiştirmek isterseniz, bu sadece orijinal bildirimi değiştirmek meselesidir ve değişkeni kullandığınız tüm yerlere uygulanacaktır.

Neden “Özel Mülkler”?

Günlük konuşmalarda geliştiriciler, önişlemcilerin ve programlama dillerinin aynı özelliğe nasıl atıfta bulunduğuna paralel olarak, genellikle bu özelliğe “CSS değişkenleri” adını verir. Ancak tamamen teknik bir bakış açısıyla, bunlar gerçekten "değişkenler" değil, Özel Özelliklerdir .

Özellik adının önünde görünen iki tire dışında, CSS'de önceden tanımlanmış herhangi bir özellik ile aynı sözdizimine sahiptirler. İki tire, CSS yazarlarının normal CSS özellikleriyle çakışma korkusu olmadan geçerli herhangi bir kesikli tanımlayıcıyı kullanmasına izin verir.

Spesifikasyon, yalnızca iki tirenin geçersiz olduğunu (görünüşe göre gelecekte kullanım için ayrılmış) ve CSS'nin yazar tarafından tanımlanan bir özel özellik olarak kullanımının ötesinde hiçbir geçerli kesikli tanımlayıcıya hiçbir zaman anlam vermeyeceğini açıklar.

Normal CSS özelliklerinin aksine, Özel Özellikler büyük/küçük harfe duyarlıdır. Bu, --main-color ile --Main-Color aynı olmadığı anlamına gelir. Özel özellik adına dahil edilecek geçerli karakterler harfler, sayılar, alt çizgiler ve kısa çizgilerdir.

CSS Değişkenleri nerede tanımlanır?

Yukarıda verdiğim örnekte görebileceğiniz gibi, genellikle doğrudan bir HTML belgesinin veya gölge DOM'nin kök öğesinde tanımlanmış CSS özel özelliklerini göreceksiniz. :root sözde sınıf seçicisi bunu başarır.

Ancak CSS Değişkenleri yalnızca kök öğede tanımlanmakla sınırlı değildir ve bunları başka bir yerde tanımlamak genellikle yararlıdır. :root seçici genellikle DOM ağacındaki en üstteki öğeyi hedeflediğinden (ister tam belge isterse gölge DOM olsun) seçilir.

Çoğu durumda, html öğesinde (HTML belgelerinde kök öğedir) veya hatta body öğesinde özel özellikler tanımlayarak aynı sonucu elde edersiniz. :root kullanmak, kodun geleceğe daha dayanıklı olmasına izin verir (örneğin, spesifikasyon bir gün kök olarak yeni bir öğe eklerse, CSS aynı kalır) ve sanırım aynı zamanda bir stil sayfasının farklı bir belge türüne uygulanmasına da izin verir. farklı bir kök öğeye sahiptir.

Örneğin, aşağıdaki kod, özel özelliklerinizi yalnızca .sidebar öğesinde kullanım için sınırlar:

Gösteri amacıyla, genellikle :root üzerinde tanımlanmış değişkenler göreceksiniz, ancak bunları pratik olan her yerde kullanabilirsiniz. Aslında, birçok geliştirici, ilk geliştirme sırasında daha küçük modüller için DOM ağacında bunları daha alta ayarlamanızı, ardından daha geniş kapsamlı değerler oluştururken :root doğru ilerlemenizi önerir.

CSS Değişkenleri hakkında teknik notlar

Herhangi bir öğeye uygulanabilmesine ek olarak, CSS Değişkenleri oldukça esnektir ve ele alınması kolaydır.

İşte dikkate değer bazı şeyler:

• Normal CSS devralma ve kademeli kurallarla çözülürler
• Bunları medya sorgularında ve diğer koşullu kurallarda kullanabilirsiniz.
• Bunları bir öğenin style özelliğinde tanımlayabilirsiniz.
• CSS Nesne Modelinin özellikleri kullanılarak okunabilir veya ayarlanabilirler.

Ayrıca, CSS değişkenlerini temel olarak iç içe yerleştirebilmeniz de dikkate değerdir. Aşağıdaki örneğe dikkat edin:

Bir --main-color değişkeni tanımladığıma dikkat edin, ardından aynı değişken adını aşağıdaki CSS değişkeni için bir değer olarak kullanıyorum.

!important anahtar sözcüğünü bir CSS değişken değerinde de kullanabilirsiniz, ancak bu, belgedeki bir veya daha fazla öğede kullanılan değere değil, diğer değişken tanımlarına göre yalnızca değişkenin kendisine "önemi" uygular. Bu kafa karıştırıcıysa, işte bir örnek:

Yukarıdaki örnekte, değişken tanımlarında daha sonra turuncu görünse de arka plan rengi “açık mavi” olacaktır. Ancak body öğesindeki arka plan değerinin kendisinin hiçbir önemi olmazdı.

CSS Değişkenleri ayrıca initial , inherit ve unset gibi CSS çapında anahtar kelime değerleri içerebilir, ancak all özelliği CSS Değişkenlerini etkilemez (yani sıfırlanmazlar).

var() işlevini anlama

Bu CSS Değişkenleri eğitiminde bazı tipik örneklerde kullanılan var() işlevini zaten gördünüz. Ancak var() için şimdiye kadar ele aldıklarımdan daha fazlası var.

İlk olarak, var() işlevi yalnızca bir değerde geçerlidir; bir özellik adı veya seçicisi bir CSS değişkeni kullanamaz. Ayrıca, bir medya sorgu değeri bir CSS Değişkeni kullanamaz (örneğin @media (max-width: var(--my-var)) geçersiz).

var() işlevi iki argüman alır:

• Dahil edilecek özel özelliğin adı
• Özel özelliğin geçersiz olması durumunda bir geri dönüş değeri

İşte ikinci argümanın etkili olduğu bir örnek:

Yukarıdaki kodda, ilk değişken adını İngiliz veya Kanadalı "renk" kelimesini kullanarak yazdım, ancak değişkeni kullandığımda Amerikan "renk" yazımını ekledim. Bu, değişkeni teknik olarak geçersiz kılar ve bunun yerine düz gri ( #ccc ) arka planı etkili olur.

Ayrıca bir geri dönüş değerinin kendi virgüllerini içerebileceğini unutmayın. Örneğin, yedeğiniz bir yazı tipi yığınıysa, onu tanımlamanın geçerli bir yolu bu olacaktır:

Değişkenimin --main-font yerine bilinmeyen --main-type bildiren bir kusuru olduğuna tekrar dikkat edin. Bu, alternatif bir yazı tipi yığını olan geri dönüş değerini tetikler. Bu nedenle, ilk virgülden sonraki her şey (diğer virgüller dahil olmak üzere) geri dönüş değeridir.

Kısmi işlemler için CSS Değişkenlerini kullanma

Bir CSS değişkeni tanımlarken, sahip olduğu değerin kendi içinde geçerli bir CSS değeri olması gerekmez; tam bir değerin parçası olarak kullanılabilen kısmi bir değer olabilir.

Örneğin, bir yazı tipi yığınını bölebilirsiniz:

Bu durumda, değişken değerlerinin her biri kendi başına çalışır, ancak noktayı gösterir. rgba() renk gösterimini kullanarak daha yapmacık bir örnek deneyelim:

Bunun ne kadar yararlı olabileceğini görebilir ve esasen dinamik olarak değerleri "oluşturmanıza" izin verebilirsiniz.

calc() ile CSS Değişkenlerini Kullanma

CSS Değişkenlerini projelerinize dahil etmenin faydalı yollarından biri, calc() işleviyle bağlantılıdır. Bildiğiniz gibi, calc() bir değer içinde hesaplamalar yapmanızı sağlar. Böylece şöyle bir şey yapabilirsiniz:

CSS özel özellikleri, örneğin önceden tanımlanmış boyutlarla calc() 'ı bir sonraki düzeye taşımanıza olanak tanır. Ahmad Shadeed benzer bir şey anlattı ve işte bir örnek:

Bu yerindeyken, medya sorguları içinde .module ve .module-* kural kümelerini kullanabilirim ve bu stilleri belirli görüntü alanı boyutları veya diğer medya özellikleri için koşullu olarak göstermeme olanak tanır. Küçük/orta/büyük modüller, birincil modülle aynı sınıflara sahip olacaktır, ancak gerektiğinde yalnızca modül boyutunun üzerine yazılır. Yukarıdaki örnekte, boyut için ilk 240 değeri bir tür varsayılan gibi davranır, ancak bir geri dönüş olarak çalışmak için var() içinde ikinci bir argüman olarak 240px iletebilirim.

CSS Değişkenleri ile Püf Noktaları

Birkaç geliştirici, yıllar boyunca CSS Değişkenlerini kullanan ipuçlarını ve püf noktalarını paylaştı. Bu temel olarak yeni başlayanlar için bir eğitim olduğu için burada ayrıntılı olarak açmayacağım, ancak işte bazılarının kısa bir özeti:

• Daha önce bahsettiğim gibi, CSS Değişkenlerini en-boy oranı kutularında olduğu gibi satır içi stillerde kullanabilirsiniz.
• Boşluk karakteri, bir CSS değişkeni için geçerli bir değerdir ve bu, Lea'nın gönderisinde okuyabileceğiniz bir açma/kapama hilesi yapmanıza olanak tanır (örneğin, karanlık mod gibi bir şey için).
• Vurgulu stilleri satır içi stillerde yazamazsınız, ancak CSS Değişkenlerini kullanarak bu sorunu çözebilirsiniz.
• CSS Değişkenleri, burada belirtildiği gibi çok renkli SVG'leri daha kolay oluşturmaya yardımcı olur.
• Bu yazıda ayrıntılı olarak açıklanan CSS Değişkenleri ile pratik ve sürdürülebilir tasarım sistemleri ve temalar oluşturabilirsiniz.
• Michelle Barker tarafından açıklandığı gibi, Izgara Düzeni özelliklerini kullanarak daha verimli ve sürdürülebilir ızgaralar oluşturmak için CSS Değişkenlerini kullanabilirsiniz.

Çözüm

CSS Değişkenleri veya CSS Özel Özellikleri, bu kullanışlı özelliği destekleyen küresel olarak kullanılan tarayıcıların %90'ından fazlası ile bugün kullanıma hazırdır. Temel bilgiler ve sözdizimi hakkındaki bu tartışmanın, henüz yapmadıysanız, en yeni projelerinizde CSS Değişkenlerini dikkate almanızı teşvik edeceğini umuyorum.

CSS Değişkenlerini kullanımınız bazı genel tema renkleriyle sınırlıysa, belki bu eğitim size onlardan daha fazla yararlanmanız için ilham verebilir ve muhtemelen kendi hilelerinizi ortaya çıkarabilir.

Artık CSS değişkenleriyle işiniz bittiğinde, diğer kılavuzlarımızdan bazılarına göz atın:

• CSS ızgara düzeni
• Parcel.js'ye Giriş
• CSS esnek kutu eğitimi
• Yeni başlayanlar için web paketi
• Acemi Geliştiriciler için Mikro Etkileşimler Eğitimi

Bu CSS Değişkenleri öğreticisiyle ilgili herhangi bir sorunuz varsa, bunları aşağıdaki yorumlarda göndermekten çekinmeyin.

Düzen ve sunum Chris Fitzgerald ve Karol K.