İçindekiler

1. Bir CSS Ön-İşlemcisi: Sass & SCSS

2. Sass'ın Tarihçesi ve SCSS

3. Neden Sass&SCSS Kullanmalıyım? Nasıl Kullanılır?

4. Kurulum ve Derleme Aşaması

   • npm
   • gulp

5. Sass İncelikleri

   • Değişken Tanımlama
   • İç-içe Yapılar Oluşturma
   • İçeri Aktarım - import
   • Mixins
   • Kalıtım
   • Operatörler
   • Koşul Durumları(If- Else)
   • "&" İşareti

---

Bir CSS Ön-İşlemcisi: Sass & SCSS

Sass(Syntactically Awesome Style Sheet), en popüler CSS ön-işlemcilerinden biridir. Kendi resmi sitesindeki tanımına göre olgun, istikrarlı ve güçlü seviyede bir CSS uzantı dilidir.

Uzantı dili cümlesinin nedeni CSS dili ile aynı olup sadece Css' i daha esnek, daha verimli ve daha düzenli yazmamıza olanak tanımasından dolayıdır. Diğer popüler olan CSS ön-işlemcileri ise; LESS, Stylus ve PostCSS' dir. Bu ön-işlemciler kısaca CSS' i bir programa dili gibi kullanmamıza olanak tanır.

Sass' ın Tarihçesi ve SCSS

Sass, 2006 yılında CSS' i Ruby diline benzer bir yapıyla geliştirme fikri ile ortaya çıkmış bir Ruby Gem' dir aslında. Şuan ise bir GitHub deposunda açık kaynak bir şekilde geliştirilmeye devam ediliyor.

Ruby diline benzer bir yapıda planlandığı için, yazım dili(syntax) normal CSS'in dışına çıkmıştır doğal olarak. Kullanım oranı arttıkça ve Front-end geliştiricilerin normal CSS' den gelen el alışkanlığı göz önünde bulundurularak, sözdizimi değişime uğramış ve SCSS haline bürünmüştür.

    Sass geliştiricileri varsayılan sözdiziminin Scss olduğunu
    fakat, Sass sözdizimine de destek vermeye devam edeceklerini söylüyorlar.

Kısaca, Sass ve SCSS' in sözdizimi(syntax) haricinde birbirlerinden farkı yoktur.

Konunun başındayken, yazım dili hakkında küçük bir örnek göstermek gerekirse;

Sass

    .container 
        width: 200px
        height: 200px

        .row 
            background-color: #fff

SCSS

    .container {
        width: 200px;
        height: 200px;

        .row {
            background-color: #fff;
        }
    }

Neden Sass&Scss Kullanmalıyım? Nasıl Kullanılır?

CSS' i hantal bir yapıdan çıkartıp daha dinamik bir yapıya döndürür. Bize içerisinde değişken tanımlama, iç içe yazım kolaylığı(yukarıdaki örnek kod gibi), karar yapıları(if, else) ve döngüler gibi birçok imkan sunar.

Global veya Local bir kurulum gerçekleştirdikten sonra projeye oluşturulan ".sass" veya ".scss" dosyalarını derleyerek normal bir CSS dosyası oluşturur. Ve o CSS dosyasını projeye dahil ederek kullanmış oluruz.

Kurulum ve Derleme Aşaması

npm

    npm install -g sass

Kurulumu gerçekleştirdikten sonra(npm ve node.js' in güncel versiyon olduğundan emin olun), bir ".scss" uzantılı dosya yaratıp komut satırına aşağıdaki kod ile derleyip, kullanıma hazır hale getirmiş oluyoruz.

    sass style.scss:style.css 

":" dan önceki kısım oluşturduğum dosya ismim(style.scss), ":" dan sonraki kısım ise derleme sonunda oluşturmasını istediğim kullanılmaya uygun parça

Dizin belirtebilirsiniz.

    sass style.scss:app/content/style.css

Yukarıdaki bölüm birkez derler bırakır. Her değişiklik yapmak istediğinizde tekrar tekrar yazmamak için;

    sass --watch style.scss:style.css

gulp

Gulp, Front-end iş akışlarını otomatikleştirmeye yarayan; kabaca tekrar eden işlemleri görev olarak tanımlayıp ardından çalıştırmak için kullanılır.

Gulp hakkında daha fazla bilgi almak için;

• Medium
• GitHub

Sass kullanımına gelecek olursak da öncelikle bir package.json dosyası oluşturuyoruz.

    npm init

Daha sonrasında da sırayla

    npm install gulp

    ve 

    npm install gulp-sass --save-dev

komutlarıyla package.json dosyamızın içerisine bağımlılıklarımızı, modüllerimizi yüklemiş oluyoruz.

Ardından bir gulpfile.js dosyası oluşturup içerisine,

    var gulp = require('gulp'); 
    var sass = require('gulp-sass');

    gulp.task('css', function(){
        return gulp.src('./src/*.scss)
            .pipe(sass())
            .pipe(gulp.dest('./dest'))
    });

yukarıdaki kodları yazıyoruz. Burada kısaca, "src" isimli dosyamızın içerisindeki tüm "scss" uzantılı dosyaları derleyip bir css dosya çıktısı vermesini istiyoruz. Gulp' ı çalıştırmak için ise, terminale "gulp" yazmak yeterli oluyor.

Ardından tabi ki oluşturulan CSS dosyamızı projeye dahil edip(normal HTML içerisine nasıl dahil ediyorsak), yolumuza devam ediyoruz.

Sass İncelikleri

1. Değişken Tanımlama

CSS' de değişken oluşturup kullanılmasına olanak sağlar, en kullanışlı özelliklerden biridir. Başına "$" işareti koymamız yeterli oluyor.

    $myColor: #424242;
    $myFontSize: 18px; 

2. İç içe Yapılar Oluşturma

CSS yazmayı hızlandıran, kod kalabalığını azaltan ve bence asıl önemi büyük projelerde ortaya çıkan favori özelliğimdir.

    div{
        width: 40px;
        height: 40px;
        background-color: purple;

        span{
            width: 20px;        
            .logo{
                color: #fff;
            }
        }
    }

3. İçeri Aktarım - import

3 adet Sass dosyamız olduğunu düşünelim. Derledikten sonra bize 3 adet CSS dosyası vermesi pek işimize yaramaz sanırım. O yüzden bu ".scss" uzantılı dosyaların birini ana dosya seçip diğerlerini bunun içerisine import etmek baya faydalı olur.

_degiskenler.scss

    $myColor: purple;
    $myFontFamily: 'Helvetica, sans-serif'; 

_reset.scss

    *{
        margin: 0px;,
        padding: 0px;
        box-sizing: border-box;
    }

main.scss

    @import 'degiskenler';
    @import 'reset';

    h1{
        font-size: $myFontFamily;
        color: $myColor;
    }

4.Mixins

Tam bir türkçe karşığı zannımca yok ama kullanılma amacı kısaca, sürekli yazdığımız CSS kodlarını tek bir yerde(fonksiyon gibi) toplayıp daha sonrasında çağırma işlemi yaparak ögeleri, elemanları stillendirmeye yarar.

Mesela;

@mixin myLayout(){
    display: flex;
    justify-content: center;
    align-items: center;
}

.kapsayici{
    @include myLayout();
}

veya

    @mixin myWidth($width){
        max-width: $width;
    }

    div{
        @include myWidth(600px);
    }

5.Kalıtım

Bu özellik ile kodlarımıza miras alma yöntemi(extend) uygulayabiliriz.

    .myLink {
        padding: 5px;
        text-decoration: none;
    }

    .btn {
        @extend .myLink;
    }

6.Operatörler

Basit matematik işlemlerini CSS' de yapmamıza olanak sağlayan bir özelliktir. Sass tarafında yapılan matematiksel işlem, CSS tarafında sonuçlandırılmış olarak görüntülenecektir.

Sass

    .kutu {
        width: 1/3 * 100%;
        height: 30px * 2.5;
    }

CSS Çıktısı

    .kutu {
        width: 33.33333%;
        height: 75px;
    }

7.Koşul Durumları(If-Else)

Direkt örnek üzerinden göstermek gerekirse;

    $value = 12;

    div {
        @if $value < 4 {
            background-color: red;
        }
        @else if $value == 4 {
            background-color: blue;
        }
        @else {
            background-color: green;
        }
    }

8."&" İşareti

Bunu canlı derste örnek proje üzerinden daha net bir şekilde açıklayacağım ama yine de kısa bir tanım yapmam gerekirse; 4. örnekteki gibi yine iç içe işlemler yaparken, "&" bu işaret, "Class" lardaki "this" anahtar sözcüğü gibi davranır.

Basit bir örnek kod üzerinden göstermek gerekirse;

Scss

    a {
        color: red;
        font-size: 10px;

        &:hover {
            color: blue;
        }
    }

Normal CSS koduyla bir "hover" işlemi yapsak?

CSS

    a {
        color: red;
        font-size: 10px;
    }

    a:hover {
        color: blue;
    }

Şimdilik bahsedeceklerim bu kadar. Umarım arasındaki farkları ve Sass' ın sağladığı kolaylıkları net bir şekilde aktarabilmişimdir. Şunu söyleyebilirim ki Sass kullanmaya başladıktan sonra normal CSS yazmak asla istemiyorsunuz ve büyük ölçekli projelerin şuan için vazgeçilmezi durumunda.

---

Kaynaklar

• https://sass-lang.com/guide
• https://drupart.com.tr/blog/sass-nedir-nasil-kullanilir
• https://webmaster.kitchen/sass-nedir-neden-kullanmaliyim/
• https://omergulcicek.github.io/gulp/eklentiler/sass

Bu rehber yukarıdaki kaynaklardan ve onların örneklerinden faydalanılarak yazılmıştır.