Üye Ol

Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Yazmanın Kolay Yolu : SASS
#1
Information 
Bu yazı Sass yazmaya giriş yapmak içindir, Html ve Css için bir başlangıç değildir. Artık her yerde bu bilgiler mevcut olduğu için bunları anlatmaya lüzum yok.

Kısaca Sass Nedir?
 
Syntactically Awesome Style Sheets ifadesinin kısaltması olan Sass, en popüler Css ön-işlemcilerinden (pre-processing) biridir. Kendi resmi sitesinde ki ifadeye göre olgun, istikrarlı ve güçlü profesyonel seviyedeki Css uzantı dilidir. İlk olarak Hampton Catlin tarafından tasarlanmış ve Natalie Weizenbaum tarafından programlanmıştır. 2006 yılında Css ve Css3’ü Ruby diline benzer bir yapıyla geliştirme fikri ile ortaya çıkan bir Ruby Gem'dir.
 
Css ön-işlemcisi tabi ki Sass’dan ibaret değil. En az Sass kadar popüler ve kullanıcısı olan bir de Less var. Ayrıca Stylus adında diğerlerine göre daha az popüler ama yeterli bir ön-işlemci daha var.
 
Sass, Css'i tıpkı bir programlama dili gibi kullanmamıza olanak sağlar, daha okunaklı ve daha pratik yazılmasının yanı sıra Css'te bulunmayan bir çok özelliği kullanmamıza olanak sağlar(Uzantı dili diye bahsedilmesinin sebebi Css ile aynı olup, sadece Css'i daha kolaylaştırmak için ek özellikler sunmasıdır). Sass ile Css yazarken yukarıda bahsettiğim gibi bir programlama dilinde kullanılan değişkenler(variables), döngüler(for,each,while), karar yapıları(if-else), fonksiyonlar, nesting yapısı(iç içe seçici), OOP(Object Oriented Proogramming-Nesne Yönelimli Programlama) yaklaşımından hakim olduğumuz kalıtım seçicileri(diğer adıyla miraz seçiciler)(inheritance) kullanabiliriz.
 
Sass ilk olarak ortaya çıktığında sözdiziminin(syntax) Ruby ile benzer olması düşünülerek tasarlanmıştı. Bu sebepten Sass kullanırken CSS'te kullandığımız noktalı virgül ';' ve süslü parantez '{}' kullanılmıyor.
 
Önyüz geliştiriciler tarafından sıkça kullanılmaya başlanmasıyla birlikte geliştiricilerin alışkanlıklarını bozmamak amacıyla Sass içine Scss inşa edilmiştir. Sass ve Scss tamamen aynıdır, sadece sözdizimleri(syntax) farklıdır. Scss ile Css'ten alışık olduğumuz noktalı virgül ';' ve süslü parantez '{}' kullanılabilir.
 
Sass yazarken dosya uzantısı '.sass',
Scss yazarken ise uzantı '.scss' olmalıdır.
 

Söz Dizimi(Syntax)
 
Yukarıda bahsettiğim gibi Sass ve Scss sözdizimleri birbirinden farklıdır. Genel olarak Scss kullanıldığı için ve Sass kurduğunuzda varsayılan olarak Scss geldiği için önerim Scss kullanmanızdır, tabi bu bir zorunluluk değil, tamamen size kalmış. Piyasada popüler olarak kullanılan kod editörlerinin tamamlama(autocomplete) özelliği varsayılan olarak geldiği için Scss yazımı daha kolay ancak isterseniz bu varsayılan ayarları değiştirebilirsiniz.

Hangisini kullanacağınızı bilmediğim için kısaca bir örnekle hem Sass hem de Scss yazıp Css dosyamızda neler olduğunu görelim(Herhangi bir metin editörü veya IDE kullanabilirsiniz):
 
SCSS:
Kod:
.kutu {
 width: 200px;
 height: 200px;
 .renk {
   background : #d35400;
   color : #1abc9c;
 }
}


SASS:
Kod:
.kutu
 width: 200px
 height: 200px
 .renk
    background : #d35400
    color : #1abc9c


CSS Çıktısı:
Kod:
.kutu {
 width: 200px;
 height: 200px;
}
.kutu .renk {  
 background: #d35400;  
 color : #1abc9c;
}



Herhangi bir html sayfa oluşturmadığımız için bu örnek biraz havada kaldı. Ayrıca bu çok basit bir örnek, burada ilk akla gelen soru 'E bu kadar mıydı?'. Bunlar ufak çalışmalarda bu şekilde olabilir, birde büyük bir çalışma yaptığınızı düşünürseniz aslında Sass kullanmanın gerçekten çok yararlı olacağını fark edeceksiniz. Tabi siz bunları yazıp çalıştırmayı denerseniz çalışmayacaktır, önce kurulum yapmamız gerekiyor:
 
Önce şuraya gidelim : http://sass-lang.com/install
 
Girdiğimiz sayfada hangi işletim sistemini kullanıyorsanız o şekilde indirebilirsiniz, ben windows(şimdilik) kullandığım için windows kısmına bakıyorum ve orada beni Ruby sayfasına yönlendiriyor: https://rubyinstaller.org/
 
Neden Ruby sayfasına yönlendiriyor diye soracak olursanız yukarıda da bahsettiğim gibi “Ruby ile geliştirildiği için” diye cevap verebilirim.
 
Yine burada da kullandığımız işletim sistemine göre indirme yapacağız, ben en son çıkan 64bit sürümünü indiriyorum, sizin sisteminiz 32bit ise 32bit sürümünü(x86) indirin. Basitçe kurabilirsiniz, tek yapmanız gereken kurulum esnasında gelecek seçeneklerde "Use UTF-8 as default external encoding." yazan kısmı işaretleyip devam etmeniz olacak, kurulum bittikten sonra çalışmasına gerek olmadığı için en son ekrandaki işareti kaldırıp kurulumu bitirebilirsiniz.
 
Kurulumun başarılı olup olmadığını kontrol etmek için komut satırına(cmd) şunu yazın:
Kod:
ruby --version

 
Hata olmadığını kabul ederek devam ediyorum. Şimdi sıra Sass kurmakta, şimdi tekrar komut satırına(cmd) şu komutu yazıyoruz:
Kod:
gem install sass

 
Kurulumun başarılı olup olmadığını kontrol etmek için komut satırına(cmd) şunu yazın:
Kod:
sass --version

Bunları yazıyoruz ama ne bunlar diye soracak olursanız '--version' size versiyon bilgisini verir, gem ise Ruby'nin paket yöneticisidir(Nodejs-npm gibi). Yani bilgisayarınızda fazlalık olmaması adına Ruby'nin bütün kütüphanelerini bilgisayarınıza indirmez, varsayılan paketler indirilir, siz kendinize lazım olanları bu şekilde indirebilirsiniz.

Yine hata olmadığını varsayıyorum. Yukarıdaki aşamaları uyguladıktan sonra kendisi kurulacaktır. Şimdi masaüstünde bir klasör oluşturalım, ben klasör ismini 'Sass Denemeleri' verdim. Buradan sonra varsayılan olarak kullanılan Scss söz dizimiyle(syntax) devam edeceğim. Bu sebeple uzantımız '.scss' olacak. Şimdi klasörümüzde 'main.scss' adında bir Scss dosyası oluşturuyoruz. Şimdi komut satırından açtığımız dosyanın içine gidiyoruz, bunu yapmak için 'cd klasor_yolu' komutunu kullanabilirsiniz.
 
Komut satırında klasörümüze girdikten sonra main.css dosyamızda yazdığımız kodların Css'e çevrilmesi için komut satırına şunu yazmamız gerekiyor:
Kod:
sass --watch .

 
Aşağıdaki çıktıyı alıyorsanız sorun yok demektir. Burada bize Scss dosyamızda yaptığımız değişiklikleri izleyip Css dosyasına çevirdiğini söylüyor.
Kod:
>>> Sass is watching for changes. Press Ctrl-C to stop.
               write ./main.css
               write ./main.css.map

 
Bu komutun farklı kullanım şekilleri mevcut ancak en basit haliyle anlatmaya çalışıyorum. Bu komutu yazıp enter tuşuna bastığımızda klasörümüzde 'main.CSS' dosyası oluştuğunu göreceksiniz. Bu aşamaları uyguladıktan sonra yukarıdaki örnekleri uygulayabilirsiniz.
 
Ben buradan sonra örneğimizi biraz daha büyütüyorum. Önce basit bir html sayfası oluşturuyorum, istediğiniz ismi verebilirsiniz, ben içine aşağıdaki kodları yazdım:

Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
   <title>Sass</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Burada dosya uzantısını .scss olarak vermiyoruz, tarayıcılar bizim scss kodlarımızı anlayamaz,
   zaten bu sebeple css dosyasına çeviriyoruz. CSS dosyasına çevirdiğimiz için de uzantısını .css
   olarak vermeliyiz. -->
   <link rel="stylesheet" href="main.css">
</head>
<body>
<section>
   <article>
       <h1 class="baslik">SASS Öğreniyorum</h1>
       <p><span class="yazar">Yazar</span> Lorem</p>
       <p class="metin">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
       ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
       in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
       non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           <a href="#">Daha Fazla Oku...</a>
       </p>
   </article>
</section>

<div class="kutu1"></div>
<div class="kutu2"></div>
<div class="kutu3"></div>
</body>
</html>


Ardından 'main.scss' dosyamın içini temizledim ve içine şu kodları yazdım(açıklamalı)(Burada da Scss kodlarını Css kodlarına çevirmek için "sass --watch ." yazmayı unutmayalım):


Kod:
// Bu işaret ile başlayan satırlar açıklama satırlarıdır.
$renk1:#e74c3c;  // Örnek bir değişken
$renk2:#16a085;  // Oluşturduğunuz bir değişkeni sayfanın her yerinde kullanabilirsiniz
$renk3:#bdc3c7;
$font-size:20px;

// Bu şekilde yazdığınız yorum satırları Css dosyasında gözükmeyecektir
/* Bu şekilde yazdıklarınız ise gözükecektir */

body {
 width: 960px;
 margin: 0 auto;
 background: $renk3;
}

// Nesting yapı(iç içe kullanım) : Eğer şuan Css yazıyor olsaydınız aşağıda yazanları tekrar tekrar yazmanız gerekecekti
// Scss yazarken bu şekilde iç içe kullanabiliriz
// Eğer başarılı bir Sass kodu yazıp yazmadığını merak ediyorsanız bir şeyi tekrar yazıp yazmadığınızı kontrol edebilirsiniz
section {
 article {  // section etiketinin içinde article etiketini kullanmıştık, hatırlayın
   .baslik {  // article etiketimizin içerisinde h1 etiketinde class olarak vermiştik
     font-size: $font-size * 2;  // Gördüğünüz gibi değişkenler ile sayısal işlemlerde yapabiliyoruz
     color:$renk2;  // Tabi sayısal işlem yaptığınız değişkenin içerisine gidip renk kodu yazarsanız kodunuz patlayacaktır
   }
   p {
     .yazar {  // p etiketimizin içerisinde span etiketimize class olarak vermiştik
       font-weight: bold;
       color:$renk2;
     }
   }
   .metin {  // Tekrar p etiketini yazmamak için class adımızı yazıyoruz sadece
     a {
       color:$renk2;
       text-decoration: none;

       // Ampersand işareti(&) : this anlamına da gelmekte, yukarıda da belirttiğim gibi tekrar a yazmamak için
       &:hover{  // bu işareti kullanıyoruz, aynı zamanda bu işaretle :hover :before gibi özellikleri kullanabiliriz
         color:$renk2;
         text-decoration: underline;
       }
     }
   }
 }
}


// Şimdi html sayfamızda tanımladığımız kutularla biraz oynayalım
// Siz başka isimlerde verebilirsiniz, illaki class olarakta tanımlamanızda gerekmiyor
// %isim şeklinde de kullanılıyor
.kutu {
 width: 200px;
 height: 200px;
 background: blue;
 display: inline-block;
}

// mixin yapısı fonksiyonlara benzese de tam olarak fonksiyon diyemeyiz
// Değişkenler kullanarak bu yapıyı oluşturalım, border-radius-olusturucu olarak isimlendirdim
// Siz başka isimler kullanabilirsiniz
@mixin border-radius-olusturucu ($top-left, $top-right, $bottom-left, $bottom-right) {
 border-top-left-radius: $top-left;
 border-top-right-radius: $top-right;
 border-bottom-left-radius: $bottom-left;
 border-bottom-right-radius: $bottom-right;
}

.kutu1 {
 @extend .kutu; // Burada yukarıda yazdığımız kutunun özelliklerini miras alabilmek için @extend etiketini kullanıyoruz
 background: red; // Yukarıdaki miras aldığımız classtan farklı özelliklerde verebilmemiz mümkün
}

.kutu2 {
 @extend .kutu; // Yukarıda yazdığım gibi miras almak OOP yaklaşımından hakim olduğumuz bir konu
 @include border-radius-olusturucu(20px,50px,30px,10px); // Burada yukarıda oluşturduğumuz mixin
} // yapısını kutumuza ekliyoruz ve eklerken @include etiketini kullanıyoruz, fonksiyonlarda değer
  // verir gibi değer verebiliyoruz

.kutu3 {
 @extend .kutu; // Eğer yukarıda yüzde(%) işaretiyle tanımlarsanız burada da o işaretle yazmanız gerekmekte
 background: gray; // Mesela şu şekilde : @extend %isim;
 width: 400px;
 @include border-radius-olusturucu(200px,50px,30px,100px); // Burada farklı değerler verdik mesela
}

Yaptıklarımızın sonucu şu şekilde olmalı;

mJn421.png


Bu kadar. Eğer daha fazla bilgi edinmek istiyorsanız şurayı ; http://sass-lang.com/guide ve şurayı ; http://sass-lang.com/documentation/file....RENCE.html ziyaret edebilirsiniz.
 
Yeni bir iş gereği yeni öğreniyorum ve bu zamana kadar saf Css yazmanın tamamen kendimi yormaya yönelik olduğunu farkettim, sizde kendinizi yormayın diye bunu yazmayı uygun gördüm.
(Son Düzenleme: 14-12-2017, Saat: 19:22, Düzenleyen: Itachi.)
Kod:
puts("Bilim-kurgu geleceğin gerçeğidir.Yıldızları sevin!")



#2
Elinize sağlık çok iyi bir yazı olmuş albayım. Ancak Sass her tarayıcıya uyumlu çalışıyor mu? Yani piyasası tam oturmamış sanki?
Fenerbahçe
#3
(15-12-2017, Saat: 01:20)hakanfg Nickli Kullanıcıdan Alıntı: Elinize sağlık çok iyi bir yazı olmuş albayım. Ancak Sass her tarayıcıya uyumlu çalışıyor mu? Yani piyasası tam oturmamış sanki?ş

Yukarıda açıklamıştım ancak gözünüzden kaçmış sanırım, tekrar açıklayayım.

Tarayıcılarımız bizim yazdığımız Sass kodlarını okuyamaz veya anlayamaz, zaten bu sebepten Sass kodlarını Css'e çevirme işlemini yapıyoruz ve yukarıda nasıl yaptığımızı da anlattım. Aslında zaten Css yazıyoruz, Sass kullanmamızdaki temel amaç işimizi kolaylaştırması ve saf Css ile yapabileceğimiz işin aynısını daha kısa sürede yapabilmemiz, ayrıca aynı işi yapmak için daha az kod yazıyoruz, bu yüzden kullanılmasını öneriyorum. Şuanda piyasada popüler olduğu için en çok kullanılanlardan birisidir, bunu da yukarıda yazmıştım. Öğrenme ihtiyacı duyarsam diğer ikisi(Less, Stylus) içinde yazı hazırlayabilirim ancak önce kendimi Sass konusunda daha da fazla geliştirmeliyim.
(Son Düzenleme: 15-12-2017, Saat: 03:24, Düzenleyen: Itachi.)
Kod:
puts("Bilim-kurgu geleceğin gerçeğidir.Yıldızları sevin!")





Hızlı Menü:


Konuyu Okuyanlar: 1 Ziyaretçi

Hakkımızda

İnsanüstü Türk forumları, tamamiyle Türkiye Cumhuriyeti'nin bir parçası olup, her daim Türk milletinin çıkarına hareket etmektedir.