SASS Nedir? Kurulumu ve Kullanımı

SASS veya SCSS nedir, ne işe yarar değişken tanımlama iç içe seçici kullanımı mixin ve operatör kullanımıyla ilgili bilgiler yer almakta.

SASS nedir?

SASS web sayfası tasarlarken CSS içerinde bulunmayan özellikleri kullanmamıza imkan veren CSS derleyicisidir.

CSS3 ile birlikte kullanılan CSS özellikleri bir hayli çoğaldı.

Bazı özelliklerin ön ek alarak çalışması, büyük çaplı projelerde uzun CSS kodlarının yazılması, CSS içinde bazı hesaplamaların yapılma ihtiyacı, aynı CSS özelliklerinin tekrar tekrar yazılması gibi sorunlar ortaya çıktı.

SASS bu sorunları en aza indirmek için geliştirilmiş CSS derleyicisidir.

SASS aşağıda yer alan özellikleri kullanarak planlı, pratik ve hızlı CSS yazmayı sağlar.

• Değişken – variables
• İç-içe seçici kullanımı – nesting
• Parçalara bölme – partials
• CSS dahil etme – import
• Fonksiyonlar – function, mixin
• Kalıtım alma – inheritance
• Operatörler – operators
• Döngüler – for, each, while
• Karar yapıları – if, else

SCSS nedir?

SASS yazım şekli programlama dillerine daha yakındır.

SCSS ise SASS diline CSS’te kullanılan süslü parantez ve noktalı virgül eklenmiş halidir.

SASS kullanımı aşağıdaki gibidir.

$font-family:    Helvetica, sans-serif
$primary-color: crimson

body
  font: 100% $font-family
  background-color: $primary-color

SASS dosya uzantısı .sass ile biter.

SCSS kullanımı aşağıdaki gibidir.

$font-family:    Helvetica, sans-serif;
$primary-color: crimson;

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

SCSS dosya uzantısı .scss ile biter.

SASS kurulumu

SASS derleyicisi Ruby ile geliştirildiğinden kullanabilmek için bilgisayarımıza Ruby kurmamız gerekiyor.

Ruby kurulum için gerekli olan kurulum dosyasını https://rubyinstaller.org adresinden indirebilirsiniz.

SASS Kurulumu

Windows işletim sisteminde SASS kurulumu için Başlat Menüsünde Ruby kısayollarının bulunduğu klasördeki “Start Command Prompt with Ruby” ile komut istemcisini çalıştırın.

Ekrana gelen komut penceresine;

gem install sass

yazıp komutu çalıştırdığınızda SASS kurulacaktır.

SASS kurulumu başarıyla gerçekleştirdikten sonra komut penceresine aşağıdaki komutu yazarak kurulumu kontrol edebilirsiniz.

sass -v

SASS kullanımı

SASS kodlarını yazdıktan dosyanın CSS dosyasına dönüştürülmesi için derlenmesi gerekir.

İlk olarak aşağıdaki SASS kodlarını deneme.scss olarak kaydedelim.

$font-family:    Helvetica, sans-serif;
$primary-color: crimson;

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

Daha sonra komut istemcisine kaydettiğimiz klasör yolunu gösterelim.

Örneğin C: bölümü altındaki proje klasörüne dosyayı kaydettiyseniz komut satırına aşağıdaki komutu yazmanız yeterli olacaktır.

cd c:\proje

Komut istemcisi çalıştığımız klasörü gösteriyorsa aşağıdaki komutu yazmanız yeterli olacaktır.

sass deneme.scss:deneme.css

Komut sonrasında SASS bize yazılan SASS kodlarını CSS kodlarına çevirip deneme.css ismiyle aynı dizine kayıt edecektir.

Ancak bunu her defa tekrar etmek zaman alacaktır.

Derlemeyi değişiklik yapıldığında yapmak için –watch parametresini eklememiz gerekiyor.

sass --watch deneme.scss:deneme.css

Komutu penceresi açık olduğu sürece dosya içinde değişiklik yapıldığında SASS dosyalarını derleyecektir.

Derleme işlemi sırasında SASS önbellek dosyası ve klasörü oluşturur.

Önbellek dosyası ve klasörü oluşturmasını devre dışı bırakma için –no-cache parametresini eklememiz yeterli olacaktır.

sass --no-cache --watch deneme.scss:deneme.css

SASS genellikle büyük çaplı projelerde kullanıldığından SASS dosyaları ayrı CSS dosyaları ayrı dizinde tutulmakta ve klasör içerisindeki birden fazla SASS dosyası derlenmektedir.

Bu işlemi yapmak için proje klasörünün içine SCSS isminde klasör açın SASS dosyalarınızı içine atın daha sonra aşağıdaki komut satırını çalıştırın.

sass --no-cache --watch SCSS:CSS

Yazılan SASS dosyaları derlenerek CSS ismindeki klasöre kopyalanacaktır.

SASS dosyaları derlendikten sonra map dosyası oluşturmaktadır devre dışı bırakmak için –source-map=none parametresini eklememiz yeterli olacaktır.

sass --no-cache --watch --sourcemap=none SCSS:CSS

SASS dosyalarının derlendikten sonra hazırlanan CSS dosyasının sıkıştırılmış veya farklı biçimde çıktı vermesini istiyorsanız –style özelliğine nested (varsayılan), compact, compressed veya expanded değerini verebiliriz.

sass --no-cache --watch --sourcemap=none --style=compressed SCSS:CSS

Artık derlenen SASS dosyaları sıkıştırılmış CSS formatı biçiminde kaydedilecektir.

Diğer parametreler hakkında bilgi almak için komut satırına aşağıdaki komutu yazmamız yeterli olacaktır.

sass --help

SASS kullanımı ve derlenmesinde en fazla kullanılan parametreler bunlardır.

SASS Değişkenler

SASS ile CSS dosyaları oluştururken en çok kullanılan özelliklerden biri şüphesiz değişkenlerdir.

CSS yazarken bazen tasarladığımız web sayfasındaki renk, genişlik, yazı-tipi gibi değerleri değiştirmemiz gerekir.

Ancak uzun CSS kodları arasında bu değişiklik zahmetli ve zaman alır.

SASS ile değişken kullanarak değişikliği kolay ve hızlı bir şekilde yapabiliriz.

SASS değişken tanımlama yapılırken değişkenin önüne dolar işareti ($) eklenir.

SASS değişken tanımlama örnekleri;

$bg-color: seagreen;

Genişlik tanımlama

$box-size: 10px;

Font tipi tanımlama

$default-font: arial, verdana;

Kullanımı

$bg-color: seagreen;
$default-font: arial, verdana;

body {
	background-color: $bg-color;
	font-family: $default-font;
}

SASS İç İçe Seçici Kullanımı

CSS ile seçim yapılırken daha alt elemanlar seçildikçe kod yazımı uzamakta ve karmaşık hale gelmektedir.

Örneğin; Tasarladığımız web sayfasında aşağıdaki gibi bir menü düzeni olsun.

<nav>
  <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımızda</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

Menüye CSS uygulamamız için aşağıdaki gibi uzun bir seçici yazmamız gerekebilir.

body {
  font-family: arial, verdana;
}

nav ul {
  background: #2c3e50;
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color: #ffffff;
  display: inline-block;
  padding: 10px 16px;
  text-decoration: none;
}

SASS iç içe seçici kullanımıyla bu işlemi daha kısa aşağıdaki gibi yapabiliriz.

$menu-bg-color: #2c3e50;
$menu-text-color: #ffffff;
$default-font: arial, verdana;

body {
  font-family: $default-font;
}

nav {
  ul {
    background: $menu-bg-color;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      a {
        color: $menu-text-color;
        display: inline-block;
        padding: 10px 16px;
        text-decoration: none;
      }
    }
  }
}

NOT: Değişken kullanımı sayesinde menü renklerini kolay bir şekilde değiştirebileceğimize dikkat edin.

CSS Sözde Sınıfları Uygulamak

CSS :hover, :active, :focus , :before, :after vb. sözde sınıfları uygularken sözde sınıfın uygulanacağı sınıfın altına ampersand işareti (&) ve sözde sınıfı yazmamız yeterli olacaktır.

$menu-bg-color: #2c3e50;
$menu-hover-color: #16a085;
$menu-text-color: #ffffff;
$default-font: arial, verdana;

body {
  font-family: $default-font;
}

nav {
  ul {
    background: $menu-bg-color;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      a {
        color: $menu-text-color;
        display: inline-block;
        padding: 10px 16px;
        text-decoration: none;
        &:hover {
          background: $menu-hover-color;
        }
      }
    }
  }
}

SASS iç içe seçici kullanımı hem daha az kod yazmayı hem de daha okunaklı bir kod düzeni sağlar.

SASS Stilleri Parçalara Bölmek

Web sayfası tasarlarken sayfayı üst kısım, içerik kısmı, sol ve sağ kısım gibi bölümlere ayırıp her bölüm için farklı CSS tanımlaması yapılması beraberinde kodların uzamasını ve karmaşık hale gelmesine neden olur.

SASS veya SCSS ile kodlama yaparken site içerisinde kullanılan menü, tablo, üst kısım, içerik kısmı, sol ve sağ kısım gibi bölümler için ayrı bir dosya oluşturup tek bir dosya haline getirebiliriz.

SASS stillerini parçalara bölmek için dosyanın önüne alt çizgi (_) eklenmesi gerekir.

Örneğin; Tasarladığımız web sayfasında aşağıdaki gibi bir menü düzeni olsun.

<nav>
  <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımızda</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

Menü için hazırlamış olduğumuz SASS dosyasını _menu.scss olarak kaydedelim.

$menu-bg-color: #2c3e50;
$menu-hover-color: #16a085;
$menu-text-color: #ffffff;

nav {
  ul {
    background: $menu-bg-color;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      a {
        color: $menu-text-color;
        display: inline-block;
        padding: 10px 16px;
        text-decoration: none;
        &:hover {
          background: $menu-hover-color;
        }
      }
    }
  }
}

Web sayfası arka plan rengi, font tipi ve yazı rengi ayarlarının olduğu SASS dosyasını _main.scss olarak kaydedelim.

$bg-color: whitesmoke;
$default-font: arial,verdana;

body {
  background-color: $bg-color;
  font-family: $default-font;
  color: black;
}

Aşağıdaki dosyayı style.scss olarak kaydedelim.

@import "main";
@import "menu";

Derleme işleminden sonra SASS dosyasının çıktısı aşağıdaki gibi olacaktır.

body {
  background-color: whitesmoke;
  font-family: arial, verdana;
  color: black;
}

nav ul {
  background: #2c3e50;
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color: #ffffff;
  display: inline-block;
  padding: 10px 16px;
  text-decoration: none;
}
nav ul li a:hover {
  background: #16a085;
}

Sitedeki menüde değişiklik yapacağımız zaman sadece menü tanımlarının olduğu SASS dosyasında değişiklik yapmamız yeterli olacaktır.

Konu hakkında detaylı bilgi almak için Bootstrap veya Foundation gibi CSS frameworklarına ait SASS dosya yapısını incelemenizi tavsiye ederim.

SASS Kalıtım Almak

Web sayfası tasarlarken hazırladığımız buton, menü veya linkler genellikle ortak özellikleri içerir.

Sadece arka plan rengi veya boyutunda değişiklik yaparak kullanırız.

SASS ile ortak özellikleri bir sınıfta toplayıp bu özellikleri kalıtım alarak kod tekrarını azaltabiliriz.

Web sayfamız için buton oluşturalım.

<button class="btn-1">Button - 1</button>
<button class="btn-2">Button - 2</button>
<button class="btn-3">Button - 3</button>

Ortak özellikleri bir sınıfta tanımlayalım.

.btn {
  border: none;
  padding: 10px;
  color: white;
  border-radius: 3px;
  outline: none;
}

Ortak özellikleri @extend ile diğer sınıflara dahil ediyoruz.

.btn-1 {
  @extend .btn;
  background-color: darkslategrey;
}

.btn-2 {
  @extend .btn;
  background-color: seagreen;
}

.btn-3 {
  @extend .btn;
  background-color: salmon;
}

Ortak özellikleri katılım alarak kullanmak kod tekrarını azaltır.

SASS Mixin

CSS3 ile gelen özelliklerin bazı tarayıcılarda ön ek alarak kullanılması zahmetli ve uzun CSS kodlarının yazılmasına neden olur.

Farklı tarayıcı ön eklerinin tekrar kullanımını azaltmak için SASS @mixin özelliğini kullanabiliriz.

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

Oluşturduğumuz mixin’i kullanmak için @include ile sınıfımıza dahil ediyoruz.

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

CSS3 linear-gradient özelliği mixin örneği aşağıda yer almaktadır.

@mixin linearGradient($top, $bottom) {
    background: $top;
    background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

Örnekteki mixin için gerekli olan parametreleri yazdıktan sonra kullanabiliriz.

.kutu { @include linearGradient(#cccccc, #666666); }

Ön ek alarak desteklenen özellikler için bir defa mixin tanımladıktan sonra istediğimiz kadar kullanabiliriz.

SASS Operatörler

Web sayfasına bölümleri yerleştirirken çeşitli zahmetli ve uzun süren hesaplamalar yapıyoruz.

SASS ile hesaplamalar için +, -, *, / ve % operatörlerini kullanabiliriz.

SASS operatörlerini kullanarak sayısal değerler üzerinde işlem yapabileceğimiz gibi renk değerleri içinde işlem yapmamıza imkan vermektedir.

Örneğin; sayfamızda 3 tane kutu modeli olsun.

<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
<div class="box-3">box-3</div>

Kutuların ortak özelliklerini bir sınıfta tanımlayıp SASS @extend ile kalıtım alarak diğer sınıflara uygulayalım.

İç boşluk ve arka plan üzerinde operatörleri kullanarak çeşitli hesaplamalar yapalım.

$box-padding: 50px;
$box-color: crimson;

.box {
  display: inline-block;
  color: white;
}

.box-1 {
  @extend .box;
  padding: $box-padding;
  background-color: $box-color;
}

.box-2 {
  @extend .box;
  padding: $box-padding+30;
  background-color: $box-color*2;
}

.box-3 {
  @extend .box;
  padding: $box-padding*2;
  background-color: $box-color/2;
}

Renkler üzerinde operatör kullanırken rengi bölmek rengi daha koyu, rengi çarpmak daha açık bir renk ortaya çıkaracaktır.

Hayırlı günler dilerim.