Elveda SASS 👋 Tekrar hoş geldin native CSS

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.

: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;
}

: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.

.blog {
  position: relative;
  padding: 1rem;
  background: var(--neutral-100);

    .blog-item {
      border: 1px solid var(--neutral-200);

      & span {
        font-size: 1rem;
      }
  }
}

.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.

:is(selector1, selector2, selector3) {
  /* styles */
}

: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.

.hero:has(.hero-button) {
  background-color: var(--accent-50);
}

.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.

.component {
  --theme: dark;
  container-name: fancy;
}

@container fancy style(--theme: dark) {
  .fancy {
    /* dark styles. */
  }
}

.component {

--theme: dark;

container-name: fancy;

}

@container fancy style(--theme: dark) {

.fancy {

/* dark styles. */

}

@container (min-width: 720px) {
  .headline {
    font-size: 2em;
  }
}

@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. @layerat-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.

@layer utilities {
  .button {
    padding: 0.5rem;
  }

  .button--lg {
    padding: 0.8rem;
  }
}

@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!