SASS Nedir? Yeni Başlayanlar İçin SASS

SASS Nedir? Yeni Başlayanlar İçin SASS

Merhabalar, sizlere arayüz kodlama (front-end developer) yaparken kullanmış olduğum CSS dili olan SASS Nedir? ve Nasıl kullanılır? hakkında kısaca bilgi vermek istiyorum.

SASS Nedir?

SASS’ın açılımı Syntactically Awsome Stylesheets olarak ifade edilir. Yani Türkçe karşılığı “Mükemmel Sözdizimsel Stil Sayfaları” diyebiliriz. SASS bizim daha esnek ve karmaşık olmayan stil dosyaları yazmamıza yardımcı olur. SASS içerisinde değişkenler, mixinler, nesting ve extend gibi yapılar kullanarak daha hızlı ve düzenli .css dosyaları yazmamıza olana sağlar.

SASS dilini iki değişik türde yazmak mümkündür. Birisi .css kodlarına aşina olduğumuz için daha hızı öğrenmemize yardımcı olan .scss diğer de kendi yapısı olan .sass’tır. Bu ikisi arasında ki farka gelin birlikte bakalım.

SASS ve SCSS Arasında ki Farklar Nelerdir?

Önce .css dilinden aşina olduğumuz ve benzer olan .scss dilinden bahsedelim. SCSS yazarken bildiğimiz CSS yazar gibi süslü parantez “{ }” işaretini ve noktalı virgülleri “;“ de kullanırız. Bir örnek .scss kodunuz inceleyecek olursak eğer;

Görmüş olduğunuz gibi “$mavi” değeri dışında .css dilinden farklı bir terim göremiyoruz. $mavi değerinin de nereden geldiğini yaznın ileri de bölümlerinde birlitke inceleyeceğiz.

Şimdi de .sass dilinin yazımına ve arasında ki farklara bakalım. SASS dilini yazarken .css ve .scss te ki gibi süslü parantez ve noktalı virgüller kullanılmaz. Daha hızlı ve hiyararşik bir yapı kullanılır. Gelin üst tarafa yazmış olduğumuz .scss kodunuz bir de .sass dili kullanarak yazalım ve arada ki farkı birlikte görelim.

Görmüş olduğunuz gibi .sass yazarken süslü parantez ve noktali virgülleri kullanmadık. Tabii ki yazma şekli olarak size hangisi kolay geliyorsa onu kullanmayı tercih etmeniz daha sağlılı ve kolay olacaktır. Ben bu derste mümkün mertebe iki yazım şeklinden de bahsetmeye çalışacağım.

SASS ve SCSS Kodlarını Derlemek

Yazmış olduğumuz .sass veya .scss kodlarını .html sayfamız ve tarayıcımız algılamaz ve bize hatalı bir geri dönüş sağlarlar. Bu hatayı engellemek için yazmış olduğumuz kodları derleyip bize .css olarak çıktısını veren programları kullanmamız gerekmektedir. Bir çok ücretli ve ücretsiz program mevcuttur. Ben aralarında Koala programını kullanmayı tercih ediyorum. Siz de diğer programları inceleyip istediğinizi seçebilirsiniz.

Bu yazı da derleme programlarına girip daha fazla uzatmak istemiyorum bu nedenle bu yazımda sadece SASS hakkında bilgiler vereceğim. SASS derleyicileri programları ve konsol kullanımı için ayrı bir yazı yazmayı tercih ederim.

Derleme programlarını incelemek isteyenler için önerebileceğim birkaç programı da burada paylaşmak isterim.

  • Hammer (Mac kullanıcıları için)
  • CodeKit (Mac kullanıcıları için)
  • Compass
  • Koala (Mac, Linux ve Windows kullanıcıları için)

Bu programlardan istediğinizi bilgisayarınıza kurup kullanmaya başlayabilirsiniz. Program kurmadan denemek isteyen arkaradaşlar da Codepad ve Codepen gibi siteleri kullanarak online olarak deneyebilirler.

Şimdi SASS’ın özelliklerini anlatan yazımıza birlikte bir giriş yapalım.

SASS’ta Değişken Kullanımı

SASS’te belki de işimizi en çok kolaylaştıran özelliktir değişkenler. Mesela geniş bir stil dosyası yazdığınızı düşünün. Ve aynı renk kodunu bir çok yerde kullandınız. Ama müşteriniz yada keyfiniz bu rengi kullanmaktan vezgeçti ve daha farklı bir tonunu kullanmak istedi. Bütün kodlar içerisinde aynı renk kodunu bulup teker teker değiştirmek yerine bir tek değişken kullanarak .css genelinin tümünde bu işlemi kolay ve hızlıca yapabilirsiniz.

Değişkenler tanımlanırken ve kullanılırken başına $ işareti alırlar. Biz de bunun bir değişken olduğunu anlarız. Üst taraflarda ki örnekler de hatırlarsanız $mavi değişkenini kullanmıştık işte tam da demek istediğim bu. Orada mavi adında bir değişen kullanıp içerisine mavi renginin hex kodunu kodyuk. Bundan sonra mavi renginin tonunu değiştirmek istersek eğer sadece #51F5EA kodunu değiştirmemiz yeterli olacaktır. Bütün $mavi değişkeni kullandığımız yerler istediğimiz yeni mavi tonuna geçecektir.

gelin bir de aynı kodun .sass’ta nasıl yazıldığına birlikte bakalım.

bu kodların .css çıktısı da aşağıda ki gibi olacaktır.

Nesting (İç İçe) Kullanımı

Nesting aslında bizim CSS yazarken kullanmamız gereken bir düzen diyebiliriz. Yani iç içe yazmak daha doğru olacaktır. Bu bizim yazmış olduğumuz kodları daha kolay okumamıza ve düzenlememize yardımcı olacaktır. Bu özelliğin ne kadar etkili olduğunu gösteren bir örneği de birlikte inceleyelim.

Görmüş olduğunuz gibi ul tagı için süslü parantez açıp kapatmadan içerisine; yazmış olduğum li tagı bu ul tagı içerisindedir diye belirttim. Ve ul tagı içerisine yazdım. Aynı şekilde a tagını da bu li tagı içerisindedir şeklinde tanımladım.

Yukarı da yazmış olduğumuz kodun bir de .sass biçiminde yazımına bakalım birlikte.

Extend (Kalıtım) Kullanımı

Bu extend özelliği de css yazarken bir çok kez hayat kurtarıyor. Aynı kodları tekrar tekrara yazmaktan sizi kurtarıyor diyebilirim. Mesela bir buton css’i yaptığınızı düşünün. Bu butonun pasif ve aktif olmak üzere iki türü olsun. Ama bu butonlarda da tek fark arkaplan rengi olsun. Bunun için aynı kod yapısını iki butona da yazarak sadece background-color: değerini değiştirmeniz gerekecekti değil mi? Ama Extend kullanarak çok kolay bunun önüne geçebilirsiniz.

Görmüş olduğunuz gibi bir buton css’i tanımladık. Aktif ve pasif butonlarımız içinde class içerisine sadece @extend buton yazarak yazmış olduğumuz buton stil kodunu .aktif ve .pasif stilleri içerisine kalıtım yaptık yani aktardık. CSS çıktısına birlikte bakacak olursak demek istediğim daha anlaşılır olacaktır.

Gelin bu kodun .css çıktısına birlikte bakalım.

şeklinde olacaktır.

Mixin Kullanımı

Mixin kullanımı da SASS’ın efsanevi sağladığı kolaylıklardan biridir. Mesela bir buton yapacaksınız ve ama kenarları oval olsun istiyorsunuz. Aynı kodu defalarca yazmak yerine @mixin kullanarak bir kere yazmanız ve kullanacağınız class içerine @include ederek çağırmanız yeterli olacaktır.

SASS’ta mixinleri tanımlarken @mixin diye başlarız ve kullanırken de kullanacağımız yere çağırmak içinde @include ederek çağırmış oluruz.

Aşağı da ki vereceğim örnekte demek istediğimi daha net ve detaylı şekilde anlayacaksınız arkadaşlar.

Burada ne yaptığımıza birlikte bakalım isterseniz arkadaşlar. Bir @mixin oluşturduk ve ismine “yuvarla” ismini verdik. Bu oluşturmuş olduğumuz yuvarla isimli @mixin içine de deger adında bir değişken tanımladık. Burada yaptığınız şey aslında görmüş olduğunuz gibi deger isimli değişkene verdiğimiz değeri kod parçası içerisinde ki yerlere yerleştir.

Bu deger değişkeni sadece mixin içerisinde çalışacaktır. Sayfa genelinde çalışmayacaktır. Şimdi gelin bu kodun .css çıktısına tekrar birlikte bakalım.

Biz bundan sonra renkleri değiştirmek istediğimiz de üst tarafta tanımlamış olduğumuz değişkenleri değiştirmemiz yeterli olacaktır. Aynı şekilde de butonun ovalliğini azaltıp çoğaltmak istiyorsan deger değişkeni içerisinde ki değeri yükseltip azaltmamız da yeterli olacaktır.

Görüş olduğunuz gibi SASS dili işimizi oldukça kolaylaştırmakta ve bize hızlı çözümler üretmemizi sunmak için geliştirilmiş bir yapıdır.

Bu yazımda kısaca SASS Nedir? ve Nasıl Kullanılır? konusuna elimden geldiğince değinmeye çalıştım arkadaşlar. Bir sonra ki yazımda da dediğim gibi SASS derleciyileri için bir yazı hazırlayabilirim. Bununla beraber eğer daha önce takip etmek imkanınız olduysa Vue.js kütüphanesi hakkında da ders yazılarım bloğumda mevcuttur.

Eğer Vue.js dili ilginizi çekiyor ve öğrenmek istiyorsanız VueJs Öğreniyorum : Giriş dersinden okumaya başlayabilir ve benimle birlikte öğrenmeye başlayabilirsiniz.

Yazılarımda aklınıza takılan, sormak istediğinizi yada gözünüze çarpen bir yanlışlık olursa lütfen yorumlarda, mail yada sosyal ağlardan bana ulaşmaktan çekinmeyin arkadaşlar.

Bir sonraki yazımda görüşmek üzere. Hoşça kalın.

Ahmet Kaplan

1987, İstanbul doğumlu. Front-End Developer.

Son Yazılar
Yorum ( 4 )
  1. anar samadov
    11 Nisan 2017 at 22:18
    Cevapla

    harika bir ders olmuş. ben de bu konuya değineceğim kaç zamandır bir türlü vakit bulamadım. güzel anlatım olmuş.

    • Ahmet Kaplan
      11 Nisan 2017 at 23:51
      Cevapla

      Güzel yorumunuz için çok teşekkür ederim. Beğenmenize sevindim. Umarım ilgili arkadaşlara faydalı bir makale olmuştur.

  2. kamal
    12 Nisan 2017 at 00:58
    Cevapla

    Tüm bloglarını okudum. güzel yazıyorsun. 🙂

    • Ahmet Kaplan
      12 Nisan 2017 at 01:01
      Cevapla

      Güzel yorumunuz için çok teşekkür ederim. Beğenmenize sevindim. 🙂

Bir cevap bırakın