Sass Tanıtımı

Bilmeniz gerekenler

Devam etmeden önce, aşağıdaki içeriklere temel bilgi sahibi olmanız gerekmektedir:

  • HTML
  • CSS

Bu konuları öğrenmek istiyorsanız, sitemizde Ana sayfa Bu dersleri ziyaret edin.

Sass nedir?

  • Sass'ın ne anlama geldiğini Syntactically Awesome Stylesheet (gramatik açısından muhteşem stil tablosu)
  • Sass bir CSS genişletimidir
  • Sass bir CSS ön işleyicisidir
  • Sass tüm CSS sürümleriyle tamamen uyumludur
  • Sass, CSS'nin tekrarlarını azaltarak zaman tasarrufu sağlar
  • Sass Hampton Catlin tarafından tasarlandı ve 2006 yılında Natalie Weizenbaum tarafından geliştirildi
  • Sass ücretsiz olarak indirilebilir ve kullanılabilir

Neden Sass kullanmalıyım?

Stil tabloları her zaman daha büyük, daha karmaşık ve daha zor bakım oluyor. Bu, CSS ön işleyicilerinin yardımcı olabileceği bir yerdir.

Sass, CSS'te mevcut olmayan özellikleri kullanmanıza olanak tanır, örneğin değişkenler, içe aktarma kuralları, mixinler, import, miras, yerleşik fonksiyonlar ve diğer özellikler.

Sass hakkında faydalı bir basit örnek

Üç ana renge sahip bir web sitesi olduğumuzu varsayalım:

#a2b9bc
#b2ad7f
#878f99

Bu HEX değerlerini ne kadar sık yazmanız gerekiyor? Aynı renk değişirse ne olur?

Bu kodu Sass ile yazabilirsiniz, yukarıdaki değerleri birden fazla kez yazmak yerine:

Sass Örneği

/* Orijinal rengi tanımlamak için değişken */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Değişkenler kullanılır */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Bu nedenle, Sass kullanırken, orijinal rengin değişmesi durumunda sadece bir yerde değiştirmeniz yeterlidir.

Sass nasıl çalışır?

Tarayıcı Sass kodunu anlayamaz. Bu yüzden, Sass ön işleyicisine Sass kodunu standart CSS'ye dönüştürmek için ihtiyacınız olacak.

Bu süreç derleme (transpiling) olarak adlandırılır. Bu yüzden, derleyiciye (bir tür program) Sass kodunu sağlamanız ve ardından CSS kodunu almanız gerekecek.

İpucu:Derleme, bir dilde yazılmış kaynak kodunu bir başka dilde dönüştürmek veya çevirmek için kullanılan bir terimdir.

Sass Dosya Türü

Sass dosyalarının dosya uzantısı ".scss" dir.

Sass Yorumları

Sass standart CSS yorumlarını destekler /* yorum */ayrıca satır içi yorumlara da destek sağlar // yorum:

Sass Örneği

/* Ana renkleri tanımlar */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Değişkenler kullanılır */
.main-header {
  background-color: $primary_1; // Burada satır içi yorum ekleyebilirsiniz
}