"SASS Nedir? Nasıl Kullanılır?"

Giriş

SASS (Syntactically Awesome Stylesheets), CSS (Cascading Style Sheets) dilini daha etkili ve düzenli bir şekilde yazmak için kullanılan bir CSS önprosesörüdür. SASS, CSS'nin özelliklerini genişleterek, daha iyi organizasyon, daha az tekrar ve daha modüler CSS kodları oluşturmanıza yardımcı olur. Bu makalede, SASS'in nedir, nasıl çalışır ve nasıl kullanılır konularını ele alacağız.

SASS Temel Özellikleri

1. Değişkenler

SASS, CSS'de kullanılan değerleri değişkenlere atama yeteneği sağlar. Bu, aynı değeri birden çok kez kullanmanız gerektiğinde, değişkenlerin kullanılabilirliği sayesinde kodunuzu daha temiz ve yönetilebilir hale getirir.

$ana-renk: #3498db;

body {
  background-color: $ana-renk;
}

.header {
  color: $ana-renk;
}

2. Gömülü İç İçe Geçmiş

SASS, CSS kodlarını daha modüler hale getirmek için iç içe geçmiş kurallar sunar. Bu özellik, CSS kodlarını daha düzenli ve anlaşılır yapar.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    text-decoration: none;
  }
}

3. Mixin'ler

Mixin'ler, tekrar eden kodları birleştirmenize ve daha sürdürülebilir bir CSS kodu oluşturmanıza yardımcı olur.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

4. Miras Alma (Extend)

SASS, bir stilin başka bir stilden miras alınmasını sağlayan @extend özelliğini destekler.

%genislik-yuzde-yuz {
  width: 100%;
}

.header {
  @extend %genislik-yuzde-yuz;
}

SASS Nasıl Kullanılır?

SASS kullanmak için şu adımları takip edebilirsiniz:

1. Kurulum: SASS'ı kullanabilmek için önce bilgisayarınıza SASS'ı yüklemeniz gerekir. Ruby yüklü değilse önce Ruby'i yüklemeniz gerekebilir.

gem install sass

2. Dosyaları Derleme: SASS dosyalarınızı CSS dosyalarına çevirmek için terminal veya komut istemcisine şu komutu yazabilirsiniz:

sass dosya.scss dosya.css

3. Watch Modu: Sürekli olarak SASS dosyanızı izlemek ve her değişiklikte otomatik olarak derlemek için şu komutu kullanabilirsiniz:

sass --watch dosya.scss:dosya.css

4. SCSS ve SASS Syntax: SASS, iki farklı sözdizim sunar: SASS ve SCSS. SCSS, daha yaygın olarak kullanılan ve CSS'ye daha benzer bir sözdizim sunan versiyondur.

Sonuç

SASS, CSS yazımını daha etkili ve yönetilebilir hale getiren güçlü bir araçtır. Değişkenler, iç içe geçmiş kurallar, mixin'ler ve miras alma gibi özellikleri sayesinde, daha temiz ve düzenli CSS kodları yazmanıza olanak tanır. SASS'ın öğrenilmesi, uzun vadeli projelerde ve büyük CSS tabanlı uygulamalarda büyük avantaj sağlar.

Aykhan Gasimzade

Full Stack Developer

Merhaba! Ben Aykhan, 1999 doğumlu bir Azerbaycanlıyım ve 2017 yılından bu yana programlamayla ilgileniyorum. Teknolojinin büyülü dünyası beni her zaman etkilemiştir ve bu merakımı kendi blogumda paylaşarak daha geniş bir kitleyle buluşturmayı amaçlıyorum.