Sass, 10 yılı aÅŸkın süredir projelerimin omurgasını oluÅŸturan, yerel olarak kurulan güçlü bir ön iÅŸlemci olarak kendini kanıtladı. Ölçeklenebilir ve kararlı CSS paketlerini verimli bir ÅŸekilde organize etmemi saÄŸladı. Bugün bile Sass’ın olaÄŸanüstü derecede güçlü bir araç olduÄŸunu düşünüyorum. Ancak 2024 yılına girerken CSS’nin hızlı bir geliÅŸim gösterdiÄŸi yadsınamaz. Bir zamanlar Sass’a özgü olan özellikler, deÄŸiÅŸkenler ve en son öne çıkan özellik olan CSS Nesting de dahil olmak üzere artık doÄŸal olarak Native CSS’e entegre edilmiÅŸtir.
DeÄŸiÅŸkenler
DeÄŸiÅŸkenleri tanımlamak, uzun süredir SCSS’nin benzersiz bir gücü olarak görülüyordu; birçok özelliÄŸin merkezi yönetimine olanak tanıyordu; bu, CSS’de uzun süre fena halde gözden kaçırılan bir özellikti. Ancak günümüzde deÄŸiÅŸkenler CSS’de de Sass’a benzer ÅŸekilde tanımlanabilmektedir. Ancak önemli bir fark, Sass deÄŸiÅŸkenlerinin yalnızca öniÅŸlemci baÄŸlamında mevcut olması, CSS deÄŸiÅŸkenlerinin ise tarayıcıda kullanılabilmesi ve hatta JavaScript aracılığıyla dinamik olarak üzerine yazılabilmesidir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | :root { --button-padding: 10px 20px; --button-bg-color: #007bff; --button-text-color: #ffffff; --button-border-radius: 8px; } .button { padding: var(--button-padding); background-color: var(--button-bg-color); color: var(--button-text-color); border-radius: var(--button-border-radius); border: none; cursor: pointer; transition: background-color 0.3s; } |
CSS YerleÅŸtirme (Nesting)
Bir öğenin stil kurallarını diğerinin içinde tanımlama yeteneği, CSS yazmayı önemli ölçüde basitleştirir. Alt öğeler veya sözde seçiciler için aynı seçiciyi tekrar tekrar kullanmak yerine, iç içe yerleştirme, bunların bir üst seçici içinde gruplandırılmasına olanak tanır. Bu teknik açık, hiyerarşik olarak yapılandırılmış ve dolayısıyla daha verimli bir kod tabanına yol açar.
CSS Nesting için %84’ün üzerinde ve Nesting Seçici için %86’nın üzerinde tarayıcı desteÄŸiyle bu teknik giderek daha eriÅŸilebilir hale geliyor.
1 2 3 4 5 6 7 8 9 10 11 12 13 | .blog { position: relative; padding: 1rem; background: var(--neutral-100); .blog-item { border: 1px solid var(--neutral-200); & span { font-size: 1rem; } } } |
:Sözde Sınıf (Pseudo-Class)
Sözde sınıf :is
, seçicilerin bir listesini kabul ederek ve bu seçicilerden herhangi biriyle eÅŸleÅŸen tüm öğeleri ÅŸekillendirerek seçici konseptinde devrim yaratır. Bu, DOM’daki öğelerin seçimini ve stilini büyük ölçüde kolaylaÅŸtırır.
1 2 3 | :is(selector1, selector2, selector3) { /* styles */ } |
Uzun seçici listeleri yerine, uzun seçiciden kaçınarak okunabilirliği artırmak için :is() komutunu kullanabilirsiniz.
: has() sözde sınıfı
CSS sözde sınıfı, :has()
koşullu stillerin uygulanmasına benzer şekilde, bir öğeyi onun alt öğelerine göre seçmenin güçlü bir yolunu sağlar.
1 2 3 | .hero:has(.hero-button) { background-color: var(--accent-50); } |
Kapsayıcı sorguları (Container)
Konteyner Sorguları, CSS3’ten bu yana web tasarımındaki en önemli yenilik olarak kabul ediliyor. Öğelerin kaplarının boyutlarına göre ayarlanmasına izin vererek Duyarlı Tasarım konseptini geniÅŸletiyorlar. Bu teknoloji, bir öğenin tasarımının baÄŸlama baÄŸlı olarak dinamik olarak deÄŸiÅŸmesine olanak tanıyarak daha esnek ve uyarlanabilir bir tasarıma yol açar.
1 2 3 4 5 6 7 8 9 10 | .component { --theme: dark; container-name: fancy; } @container fancy style(--theme: dark) { .fancy { /* dark styles. */ } } |
1 2 3 4 5 | @container (min-width: 720px) { .headline { font-size: 2em; } } |
Konteyner fantezisinde –theme: dark deÄŸiÅŸkeni varsa, aÅŸağıdaki CSS’yi ekleyin.
Kademeli katmanlar
Kademeli katmanlarla, kendi katmanımızı (katmanımızı) atayarak daha yüksek özgüllük için sınıfların, kimliklerin vb. iç içe geçmesini önleyebiliriz. @layer
at-rule ve Layered kullanarak @imports
, sıfırlamalar ve varsayılanlar gibi düşük öncelikli stillerden temalar, çerçeveler ve tasarım sistemleri aracılığıyla bileşenler, yardımcı programlar ve geçersiz kılmalar gibi en yüksek öncelikli stillere kadar kendi basamaklı katmanlarımızı oluşturabiliriz. Kademeli katmanlar daha fazla kontrol sağlar.
1 2 3 4 5 6 7 8 9 | @layer utilities { .button { padding: 0.5rem; } .button--lg { padding: 0.8rem; } } |
SASS’ın GeleceÄŸi
Bu, Sass’ın geçerliliÄŸini yitirdiÄŸi anlamına mı geliyor? Hiç de bile. Piksellerin rem’e dönüştürülmesi gibi karışımlar ve iÅŸlevler, Sass’ın vazgeçilmez avantajları olmaya devam ediyor. Yine de projelerimin çoÄŸunda Sass’tan vazgeçmeye karar verdim. Bunun yerine Sublime Editörümde önceden tanımlanmış kod blokları ve paketleri kullanıyorum, bu da iÅŸ akışımı önemli ölçüde geliÅŸtirdi.
Güle güle SASS?
2024 yılında Sass’ın kurulum, kullanım ve derleme sorunları da dahil olmak üzere faydalarının artık kullanımını haklı çıkarmayacağına gerçekten inanıyorum. Modern CSS’nin ölçeklenebilirliÄŸi ve kullanıcı dostu olması, ek araçlara ihtiyaç duymadan bunu yapmayı mümkün kılar.
CSS’nin geliÅŸmesiyle birlikte küçük ve büyük projeleri doÄŸrudan ve basit bir ÅŸekilde hayata geçirmeyi sabırsızlıkla bekliyorum.
Güle güle Sass, her şey için teşekkür ederim!