Bu repo, SASS (Syntactically Awesome Style Sheets) ve SCSS (Sassy CSS) ile ilgili temel kavramları öğrenmek isteyenler için hazırlanmıştır. SASS, CSS yazmayı daha modüler, daha hızlı ve bakımı kolay bir hale getiren bir ön işlemcidir. Bu tutorial, SASS'in SCSS sözdizimi üzerinden açıklamalar ve örnekler içermektedir.

• Gereksinimler
• Kurulum
• Temel Kavramlar
• Değişkenler
• İç içe Geçme (Nesting)
• Kısaltmalar (Partials)
• Mixins
• Extend (Miras Alma)
• Operatörler
• SCSS ve SASS Farkı
• Watch ve Compile
• Kaynaklar

• Node.js ve npm'in bilgisayarınıza kurulu olması gerekmektedir.
• SASS'i çalıştırabilmek için global olarak sass paketini yüklemeniz gerekmektedir.

npm install -g sass

• Ayrıca bunu yerel olarak bir projeye de ekleyebilirsiniz:

npm install sass

Projede SASS ve SCSS kullanmaya başlamak için aşağıdaki adımları takip edebilirsiniz:

1. Projeye bir styles.scss dosyası ekleyin.
2. SCSS dosyasını CSS'e çevirmek için şu komutu çalıştırın:

sass styles.scss styles.css

3. HTML dosyanızda oluşturduğunuz styles.css dosyasını dahil edin.

<link rel="stylesheet" href="styles.css">

SASS ile CSS içinde değişken tanımlayarak aynı değeri birden fazla yerde kullanabilirsiniz.

$primary-color: #3498db;

body {
  color: $primary-color;
}

SASS, stil kurallarını iç içe yazmanıza olanak tanır ve bu, daha okunabilir ve organize bir kod yazmanıza yardımcı olur.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
      display: inline-block;
    }
  }
}

SASS'ta kodlarınızı modüllere ayırarak kısaltmalar oluşturabilirsiniz. Bu dosyalar _ ile başlar ve derleme işleminde ana SCSS dosyasına dahil edilir.

// _buttons.scss
.button {
  border-radius: 5px;
}

// main.scss
@import 'buttons';

Mixins, stil kurallarını bir araya toplar ve bunları birden fazla sınıfta yeniden kullanmanıza olanak tanır.

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

.box { 
  @include border-radius(10px);
}

@extend, bir sınıfın stil kurallarını başka bir sınıfa miras almak için kullanılır.

.message {
  padding: 10px;
  border: 1px solid #ccc;
}

.success {
  @extend .message;
  border-color: green;
}

SASS, CSS ile çalışırken matematiksel işlemleri kullanmanıza izin verir.

.container {
  width: 100% - 20px;
}

• SCSS: CSS ile tamamen uyumludur ve süslü parantezler ve noktalı virgüller kullanır.
• SASS: Daha sade bir sözdizimi sunar ve süslü parantez ile noktalı virgüller olmadan çalışır.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

• SCSS'nizi CSS'ye derlemek için terminalinizde aşağıdaki komutu kullanabilirsiniz:

sass --watch scss:css

• Bu komut, SCSS dosyalarınızı değişikliklere karşı izler ve bir değişiklik algılandığında bunları otomatik olarak CSS'ye derler.

• Sass Official : https://sass-lang.com/
• Sass Playground : https://sass-lang.com/playground/
• Learn Sass : https://sass-lang.com/guide/
• Install Sass : https://sass-lang.com/install/