Yandex Metrica
SASS ve SCSS Nedir? Nasıl Kullanılır? - Yasin Sunmaz

Yasin Sunmaz

Kodladıkça değişen bir dünya...

SASS ve SCSS Nedir? Nasıl Kullanılır?

19.06.2023 yasinsunmaz 330 0

Bu yazımda CSS'in genişletilmiş bir versiyonu olan SASS (Syntactically Awesome Style Sheets)'ı ele alacağım. CSS yazma deneyimini geliştiren ve stil tabanlı projelerde daha verimli çalışmayı sağlayan bir CSS preprosesörüdür. SASS, daha organize ve yönetilebilir bir CSS kodu oluşturmak için bazı özellikler ekler ve CSS yazmayı daha esnek hale getirir. SASS dosyaları .scss uzantılı olup derlendiğinde .css uzantılı dosyalar oluşturur.

Visual Studio Code programında SASS dosyamızda her değişiklik olduğunda otomatik olarak ilgili dosya adında bir .css dosyası oluşturması için "Live SASS Compiler" eklentisini kullanabilirsiniz. Eklenti SASS dosyasında her yaptığınız değişikliği otomatik olarak güncelleyecektir.

Genel olarak da SASS ve SCSS nedir, nasıl kullanılır, hangi özellikleri barındırır gibi konulara değinmeye çalışacağım. Yazının sonunda detaylı bilgiler içeren SASS-101 GitHub repomun linkine ulaşabilirsiniz.

SASS, CSS'i daha etkili ve okunabilir hale getirmek için birden fazla özelliğe sahiptir. İşte SASS'in bazı temel özellikleri:

Değişkenler

SASS, CSS'teki değerleri tekrar tekrar kullanmak için değişkenleri destekler. Bir değişken tanımlayarak, stil değerlerini bir yerde güncellediğinizde otomatik olarak tüm kullanımlarını güncelleyebilirsiniz.

Örneğin:

$ana-renk: #ff0000;
a { 
   color: $ana-renk; 
}
h1 {
   color: $ana-renk;
}

Bu örnekte, $ana-renk değişkeni #ff0000 değerine sahiptir ve bu renk, hem a hem de h1 elemanları için kullanılır. Renk değiştiğinde, sadece değişkeni güncellemek yeterlidir.

Yumuşak Düşme (Nesting)

SASS, HTML elemanlarının iç içe geçmiş yapısını yansıtan bir stil yapısı sunar. Bu, CSS yazmayı daha düzenli ve anlaşılır hale getirir.

Örneğin:

nav { 
ul { margin: 0; padding: 0; list-style: none; 
    li { display: inline-block; margin-right: 10px;
        a { color: $ana-renk; text-decoration: none;}
       }
    }
} 

Bu örnekte, nav içindeki ul, li ve a elemanları birbirine gömülüdür. Bu, CSS'in daha ayrıntılı hedeflemesini ve daha temiz bir stil yapısını destekler.

Mixin'ler

Mixin'ler, tekrar kullanılabilir stil tanımlamalarını oluşturmanızı sağlar. Bir mixin tanımlayarak, stil kodunuzda belirli bir stil kümesini birden çok yerde kullanabilirsiniz.

Örneğin:

@mixin kutu-döndür {
transform: rotate(10deg);
}
.kutu {
width: 100px; height: 100px; background-color: #ccc;
@include kutu-döndür;
} 

Bu örnekte, kutu-döndür adında bir mixin tanımlanmıştır ve .kutu sınıfı bu mixin'i kullanmaktadır. Bu sayede, kutu sınıfının stilindeki dönme işlemi (transform) mixin'in içinde tanımlanan değeri kullanarak gerçekleşir.

İçe Aktarma (Import)

SASS, birden çok stil dosyasını tek bir dosyada birleştirmek için içe aktarmayı destekler. Bu, projenizin stil kodunu modüler hale getirir ve daha kolay yönetilebilir yapar.

Örneğin:

@import 'reset'; @import 'layout'; @import 'typography'; 

Bu örnekte, reset, layout ve typography olmak üzere üç ayrı stil dosyası içe aktarılır. Böylece, tek bir SASS dosyasında tüm stil kodunuzu yönetebilirsiniz.

Döngüler (For)

SASS'ta kendi içerisinde dinamik classlar yazabilmek için döngüler kullanabilirsiniz.

Örneğin:

@for $x from 1 through 10 {
    .font-size-#{$x} {
        font-size: 0px + $x;
    }
}

Scss sayesinde for döngülerini de kullanabiliriz. Aşağıdaki kullanım ile ".font-size-1" den başlayıp ".font-size-10" a kadar css classı oluşturacaktır.

Koşullar (If)

SASS içerisinde farklı durumları yönetebilmek adına if koşulları kullanabilirsiniz. Farklı koşullara göre farklı davranışlar sergilemesini sağlayabilirsiniz.

Örneğin:

$title: red;
$sub-title: green;
p.if {
    @if $title==red {
        color: blue;
    }
    @else if $sub-title==green {
        color: yellow;
    }
    @else {
        color: black
    }
}

SASS içerisinde farklı durumları bu tarz kullanımlar ile yönetebilirsiniz.

Bu yazımda detaylarına inmediğim diğer konu başlıkları aşağıdaki gibidir. GitHub repomda bu konulara ait örnekleri ve açıklamaları bulabilirsiniz.

String Fonksiyonlar

Numeric Fonksiyonlar

List Fonksiyonlar

Map Fonsiyonlar

Selector Fonksiyonlar

Introspection Fonksiyonlar

SASS, daha fazla özelliğe sahip olup bu özellikler sayesinde CSS yazmayı daha esnek ve verimli hale getirir. SASS kodunuzu daha sonra CSS'e dönüştürmek için Sass derleyicisi kullanmanız gerekmektedir. Sass derleyicisi, SASS kodunu alır ve standart CSS dosyası olarak çıktı verir.

SASS, CSS geliştirme sürecini büyük ölçüde kolaylaştıran bir araçtır. Daha organize ve düzenli bir stil kodu oluşturmanızı sağlar, tekrar kullanılabilir stil tanımlamalarını destekler ve stil tabanlı projelerde daha verimli çalışmanıza yardımcı olur. SASS kullanarak, CSS yazarken daha az tekrarlamaya ve daha fazla esnekliğe sahip olursunuz.

SASS-101 adlı GitHub repoma buradan ulaşabilirsiniz. Başlangıç için fikir edinmeniz için yararlı olacağını düşünüyorum.

Umarım faydalı olmuştur. İyi çalışmalar dilerim.

  • Yorum yapabilmek için giriş yapmalısınız. Giriş yapmak için tıklayınız.

Diğer Yazılar

En İyi Çevrimiçi CSS Gölge Oluşturucu Araçları

26.12.2022 yasinsunmaz 305 0

Web tasarımı söz konusu olduğunda, gölgeler sayfalarınıza çok fazla derinlik ve boyut katabilir. Ama ne yazık ki, gölgeler oluşturmak biraz zor olabilir....

JavaScript İle Url Href Alma ve Href Bilgisini Değiştirme

12.03.2022 yasinsunmaz 3729 0

HTML sayfalarımızda bir tetikleme sonucunda ya da sayfa yüklendiğinde a href bilgisini değiştirmeye ihtiyacımız olabiliyor. Java Script ile HTML'de a href bilgisini değişt...

JavaScript Tarih Dönüştürme ve Sıralama İşlemi

07.03.2022 yasinsunmaz 1554 0

Verilerimiz bazen farklı farklı tablolar üzerinden alınarak bir araya geldiğinde anlam kazanır. Farklı tablolardan veri almamız sonucunda bazı işlemleri yapmak zor olabilir ya...

En İyi CSS Hileleri ve Oluşturucuları

30.09.2020 yasinsunmaz 1793 0

Web site tasarlarken değişik tasarımlara ihtiyaç duyulmaktadır. Tasarımlarımızı CSS ile yapıyoruz. Fakat bazı durumlarda istediğimiz sonucu alabilmek için olduk&ccedi...

YS CSS Yayında!

22.09.2019 yasinsunmaz 1068 0

Herkese merhaba, Ne zamandır hayata geçirmek istediğim basit ama yararlı olabileceğini düşündüğüm YS CSS'i artık yayınladım. Bazı durumlarda eleme...