Open in app

Sign in

Write

Sign in

Sass Rehberi

Oğuzhan Uyanık
Kodcular
Published in
10 min readSep 22, 2022

Sass

  • Bir CSS ön işlemcisidir (preprocessor).
  • CSS kodlarına dönüştürülmek üzere, farklı bir syntax ve programlama teknikleriyle kod yazmayı sağlar.
  • .sass ve .scss uzantılı olmak üzere iki farklı sürümü vardır. En son çıkan sürüm .scss uzantılı olandır ve syntax olarak CSS’e benzediği için genellikle bu sürüm tercih edilir. Ayrıca, Sass olarak bahsedilen genellikle .scss‘dir ve bu yazının konusu da bu versiyondur.
  • Sass ile yazılan kodların çıktısı, yine CSS kodu olacağı için, kullanıcılar açısından fark eden bir şey olmaz. Ancak geliştiriciler açısından yazım ve bakım kolaylığı sağlar. Ayrıca sağladığı modülerlik sayesinde daha temiz kodlar elde edilir.

Sass ve Scss Farkı

  • Sass’da kodlar noktalı virgül ile bitirilmez.
    Scss’de kodlar noktalı virgül ile bitirilmek zorundadır.
  • Sass’da blok yapıları girinti ile oluşturulur.
    Scss’de blok yapıları süslü parantez “{}” ile oluşturulur.
  • Sass, Sass’ın ilk sürümüdür ve hala desteklenmektedir.
    Scss, Sass’ın son sürümüdür ve CSS’e benzerliği sebebi ile daha yaygın kullanılmaktadır.
  • Sass’da mixin oluşturmak için hem @mixin, hem de = işareti kullanılır.
    Scss’de mixin oluşturmak için @mixin ifadesi kullanılır.
  • Sass’da mixin çağırmak için hem @include, hem + işareti kullanılır.
    Scss’de mixin çağırmak için @include ifadesi kullanılır.

Kurulum

  • Sass dosyaları doğrudan tarayıcılar tarafından algılanamazlar bu yüzden bir compiler aracı ile CSS kodlarına dönüştürülmeleri gerekir. Bu araçların bir listesine sass-lang.com/install sayfasından erişebilirsiniz. Bu yazıda, bir VS Code eklentisi kullanarak derleme işlemini yapacağız.
  • VS Code, eklentiler bölümünden “Live Sass Compiler” isimli eklentiyi kurun.
  • Deneme.scss isimli bir dosya oluşturun ve bu dosyayı VS Code ile açın.
  • Kod satırının, en altında bulunan şeritteki “Watch Sass” isimli butona tıklayın.
  • Bu tıklamayla birlikte Deneme.css ve Deneme.css.map isimli iki dosya oluşturulacaktır(zaten bu isimde bir dosya varsa üzerine yazılacaktır).
  • .css.map uzantılı dosya .css ve .scss arasındaki bağlantıyı sağlar. Bu dosya içerisinden çeşitli ayarlar yapılabilir (.css dosya konumu, .scss dosya konumu gibi). Bu dosya otomatik olarak oluşturulduğunda herhangi bir ayar yapmaya gerek yoktur.
  • Kurulum tamamlanmıştır. Bu noktadan sonra .scss dosyasına yazdığımız kodlar, her kayıt edildiğinde otomatik olarak CSS’e dönüştürülür.
  • “Watch Sass” butonu ile .scss dosyasının izleme işlemi başlatıldığı gibi, aynı yerde bulunan “Watching” butonuna basarak izleme işlemini durdurabilirsiniz.

Yazım Kuralları (Syntax)

  • Scss komutları noktalı virgül ile bitirilir.
$degisken: 16px;
  • Scss içerisinde CSS kodu yazılabilir.
ul {
  list-style-type: none;
}
  • Scss kodları nested denilen yöntemle iç içe kullanılabilir.
ul {
  list-style-type: none;
  li {
    float: left;
    a {
      text-decoration: none;
    }
  }
}
  • Scss dosyasında içe aktarma yapılırken dosya ismi tırnak işaretleri arasına alınır.
@import "variables"
  • Scss isimlendirmelerinde kullanılan alt çizgi işareti ( _ ) ve normal çizgi işareti ( — ) aynı olarak algılanır. Yani, $font_size değişkeni ile $font-size değişkeni aynı kabul edilir ve iki türlü de çağrılabilir. Bu sadece değişkenlerde değil, diğer isimlendirme ve dosya içe aktarmalarında da geçerlidir.

Yorum Satırları (Comments)

  • Sass dosyalarında yorum satırları aşağıdaki gibi oluşturulur.
// Tek satırlık yorumlar için/* Birden çok 
   satır yorumlar
   için */
  • Tek satırlık yorumlar “sessiz yorumlar” olarak adlandırılır ve .css dosyasına dönüştürüldüğünde bu yorumlar aktarılmaz. Ancak çok satırlık yorumlar .css dosyasına aktarılır.
  • Interpolation denilen yöntemle çok satırlık yorumlar içerisinde işlem yapılabilir.
.scss
/* 1 + 2 = #{1+2} */.css
/* 1 + 2 = 3 */

Değişkenler (Variables)

  • Bir scss değişkeni aşağıdaki gibi tanımlanır ve kullanılır.
$beyazRenk: #ffffff;
$normalFont: 16px;
$sans: sans-serif;body {
  background: $beyazRenk;
  font-size: $normalFont;
  font-family: $sansFamily;
}
  • Scss veri türleri aşağıda listelenmiştir.
Numbers: 
  $genislik:100;
  $yukseklik:100px;String:
  $ilkfont: "Arial";Colors:
  $mavi: blue;
  $beyaz: #fff;
  $siyah: rgba(0,0,0,1);Boolean:
  $dogru: true;
  $yanlis: false;Null:
  $bos: null;List:
  $boyutlar: 10px, 20px, 30px;Map:
  $font-weights: ("regular": 400, "medium": 500, "bold": 700);
  • Scss değişkenlerinde; alt çizgi işareti ( _ ) ve normal çizgi işareti ( — ) aynı olarak algılanır. Yani, $font_size değişkeni ile $font-size değişkeni aynı kabul edilir ve iki türlü de çağrılabilir.
  • Daha sonra değer atanmak üzere oluşturulan değişkenler boş bırakılamaz, bunun yerine null değer verilerek tutulabilir.
  • !default ifadesi, değişkenlere koşullu değer ataması yapmak için kullanılır.
$degisken: 5 !default;// Daha önce değer atanmadığı için 5 değerini alır.
// Eğer atanmış olsaydı eski değerini korurdu.

Kapsam (Scope)

  • Bir blok içerisinde bulunmayan değişkenler globaldir ve her yerden erişilebilir. Bir blok içerisindeki değişkenler ise sadece bulundukları blok tarafından erişilebilir.
$evrensel: null;body {
  $yerel: null;
}
  • Yerel bir değişken !global eki ile her yerden erişilebilir hale gelebilir.
body {
  $yerel: null !global;
}

İç İçe Kullanım (Nested)

  • Scss kodları nested denilen yöntemle iç içe kullanılabilir.
.scss
ul {
  list-style-type: none;
  li {
    float: left;
    a {
      text-decoration: none;
    }
  }
}.css
ul {
  list-style-type: none;
}
ul li {
  float: left;
}
ul li a {
  text-decoration: none;
}
  • İç içe kullanım özelliği ile birlikte kullanılan ön ek tanımlama özelliği aşağıdaki gibi kısa yazım kolaylıkları sağlar.
.scss
body {
  font: {
    size: 16px;
    weight: bold;
    family: Arial;
    style: italic;
  }
}.css
body {
  font-size: 16px;
  font-weight: bold;
  font-family: Arial;
  font-style: italic;
}

Ebeveyn Seçici (Parent Selector)

  • Ampersand işareti ( & ), ebeveyn seçici olarak adlandırılır. İçerisinde bulunduğu blok seçicisinin değerini alır.
.scss
.link {
  color: blue;
  &:hover {
    color: red;
  }
}.css
.link {
  color: blue;
}
.link:hover {
  color: red;
}

Yer Tutucu Seçici (Placeholder Selectors)

  • Yüzde işareti ( % ) ile tanımlanan seçicilerdir. Bu seçicilere ait bloklar .css dosyasına aktarılmaz. Sadece @extend komutu ile kullanıldıklarında aktarılırlar.
.scss
%renkler {
  background-color: red;
  border-color: green;
  color: blue;
}
body {
  margin: 0;
  padding: 0;
}.css
body {
  margin: 0;
  padding: 0;
}
  • Yukarıdaki örnekte @extend komutu ile dahil edilmediğinde aktarılmadığı gösterilmiştir. Aşağıdaki örnekte ise nasıl aktarılacağı gösterilmektedir.
.scss
%renkler {
  background-color: red;
  border-color: green;
  color: blue;
}
body {
  @extend %renkler;
  margin: 0;
  padding: 0;
}.css
body {
  background-color: red;
  border-color: green;
  color: blue;
}
body {
  margin: 0;
  padding: 0;
}

İnterpolasyon (Interpolation)

  • İnterpolasyon, ekleme yapmak anlamına gelir. Kelime anlamıyla örtüşen bir kullanımı vardır.
  • İnterpolasyon işlemi #{ } kodları ile oluşturulur ve işlenecek değerler parantezin içerisine yazılır.
  • İnterpolasyon bildirimi ile değişken kullanılabilir veya matematiksel işlemler yapılabilir.
  • Aşağıdaki örnekte interpolasyon yöntemi, seçici ismi ile birlikte kullanılmıştır.
.scss
@mixin box($name) {
  my-#{$name} {
    width: 100px;
    height: 50px;
    background: red;
  }
}
@include box(danger).css
my-danger {
  width: 100px;
  height: 50px;
  background: red;
}
  • İnterpolasyon yöntemi bir CSS özelliği tanımlanırken de kullanılabilir.
.scss
$wk: "-webkit";body {
    #{$wk}-box-sizing: border-box;
}.css
body {
  -webkit-box-sizing: border-box;
}
  • İnterpolasyon ile aşağıdaki gibi işlemler de yapılabilir.
.scss
$degisken: 2;
h1 {
  font-size: #{$degisken*3rem}
}.css
h1 {
  font-size: 6rem;
}

@import

  • Sass dosyalarını içe aktarmak için kullanılır. Bu özellik sayesinde modüler bir şekilde Sass kodları oluşturulabilir.
  • Bir CSS özelliği olan @import ile karıştırılmamalıdır.
  • @import özelliği ile .scss, .sass ve .css dosyaları içe aktarılabilir. İçe aktarma işleminde dosya adının önünde bulunan alt çizgi ( _ ) ve çizgi ( — ) işaretleri görmezden gelinir ve dosya uzantısı otamatik algılanacağı için yazılmaz.
_reset.scss_main.scss
@import "reset"
  • Scss ile aktarma yapılırken tırnak işareti kullanılması zorunludur.
  • İçe aktarma işlemini bir blok içerisinde de yapmak mümkün.
_reset.scss_main.scss
body {
  @import "reset"
}

@use

  • @import özelliği gibi dosyaları içe aktarmak için kullanılır.
  • Yeni bir özelliktir ve henüz tam destek görmediği için @import özelliği kullanılmaya devam edilebilir.
  • @import özelliği ile aynı dosya, birden çok defa içe aktarılabilirken, @use özelliği ile sadece bir defa aktarılabilir.
  • @use ile aktarılan dosyalarda, özel olarak isimlendirilmiş yani alt çizgi ( _ ) ve çizgi ( — ) işaretleri ile başlayan öğeler aktarmaya dahil edilmez.
  • Öğeler bir ön ek alarak gelirler ve bu sayede aynı isimli değişkenler ve diğer öğeler birbirini ezmek zorunda kalmaz.
@use "dosya" as d;.buton {
  font-size: d.$normal;
}

@forward

  • @use kuralı ile birlikte kullanılır. Zincirleme içe aktarma işlemi yapabilmeyi sağlar.
  • Aşağıdaki örnek üzerinden inceleyecek olursak; dosya2’nin içerisine dosya1 aktarılmıştır ve sonra da dosya2, dosya3’ün içine aktarılmıştır. Eğer @forward yerine @use kullanmış olsaydık dosya3, dosya1’e erişemeyecekti.
dosya1.scss
@mixin liste {
  margin: 0
  padding: 0
  list-style: none
}dosya2.scss
@forward "dosya1"dosya3.scss
@use "dosya2"
li {
  @include dosya2.liste
}dosya3.css
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
  • @forward kuralı genellikle tüm içe aktarmaları tek bir dosyada toplamak ve daha sonra tek bir komut ile ana dosyaya aktarmak için kullanılır.

@mixin ve @include

  • @mixin kuralı ile bir grup CSS özelliği tanımlanabilir ve farklı yerlerde tekrar yazılmaya gerek kalmadan kullanılabilir.
.scss
@mixin liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box {
  @include liste;
}.css
.box {
  margin: 0;
  padding: 0;
  list-style: none;
}
  • @mixin özelliği fonksiyonlarda olduğu gibi parametre alarak da kullanılabilir.
.scss
@mixin kutu($width, $height) {
 height: $height;
 width: $width;
}
.box {
 @include kutu(100px, 200px);
 background: blue;
}.css
.box {
  height: 200px;
  width: 100px;
  background: blue;
}
  • Parametreli @mixin’lere varsayılan bir parametre değeri de atanabilir.
.scss
@mixin kutu($width: 200px, $height: 100px) {
 height: $height;
 width: $width;
}
.box {
 @include kutu($width: 100px);
 background: blue;
}.css
.box {
  height: 100px;
  width: 100px;
  background: blue;
}

@extend

  • Genişletmek anlamına gelen @extend özelliği sayesinde, bir özellik grubunu, birden çok öğe için kullanabiliriz.
.scss
.buton {
  border: 2px solid grey;
  padding: 10px 20px;
  text-align: center;f
}
.buton-iptal {
 @extend .buton;
 background-color: red;
}.css
.buton, .buton-iptal {
  border: 2px solid grey;
  padding: 10px 20px;
  text-align: center;f
}
.buton-iptal {
 background-color: red;
}
  • Ayrıca, @extend özelliği; yer tutucu seçicilerle tanımlanmış öğeleri dahil etmek için de kullanılır.
.scss
%renkler {
  background-color: red;
  border-color: green;
  color: blue;
}
body {
  @extend %renkler;
  margin: 0;
  padding: 0;
}.css
body {
  background-color: red;
  border-color: green;
  color: blue;
}
body {
  margin: 0;
  padding: 0;
}

@function ve @return

  • Function yapısı, bazı açılardan mixinlere benzer ancak tamamen farklı amaçlarla kullanılırlar. Mixinler, fonksiyonlar gibi parametre alabilir ve bir kod bloğunu çağırmak için kullanılır. Ancak işlem yapıp değer döndüremezler. Fonksiyonlar ise return özelliği ile değer döndürebilir ve işlemler yapabilirler.
  • Parametresiz bir fonksiyon aşağıdaki gibi oluşturulup kullanılabilir.
@function karanlikMod(){
 @return #000000;
}body {
 background-color: karanlikMod();
}
  • Parametreli bir fonksiyon aşağıdaki gibi koşullu ifadelerle birlikte kullanılabilir.
@function mod($deger){
  @if ($deger == "karanlik") {
    @return #000000;
 }@else if ( $deger == "aydinlik" ) {
    @return #ffffff;
 }
}body {
  background-color: mod("karanlik");
}
  • Parametreli bir fonksiyon ile işlemler yapılıp, sonuç döndürülebilir. Aşağıdaki örnek px değerini rem değerine çevirir.
.scss
@function hesapla($px) {
  @return $px/16 + rem ;
}p {
  font-size: hesapla(32);
}.css
p {
  font-size: 2rem;
}

Operatörler (Operators)

  • Aritmetik operatörler
+ toplama
- çıkarma
* çarpma
/ bölme
% mod alma
  • Karşılaştırma operatörleri
== eşit mi?
!= eşit değil mi?
<  küçük mü?
<= küçük veya eşit mi?
>  büyük mü?
>= büyük veya eşit mi?
  • Mantıksal operatörler
and  ve
or   veya
not  değil
  • Ayrıca, matematiksel işlemlerde öncelik vermek için parantez ( ) işareti kullanılır.

@if, @else if ve @else

  • Koşullu ifadeler oluşturmak için kullanılan if, else if ve else yapıları aşağıdaki gibi kullanılır.
$degisken: 3;p {
   @if $degisken<5 { 
       color: blue;  
   } @else if $degisken>5{
       color: red;
   } @else {
       color: white;
   }
}
  • Koşullu ifadeler, iç içe kullanılabilir.
$degisken: 3;p {
  @if $degisken<5 { 
    color: blue;
    @if $degisken==3 {
      color: red;
    }
  }
}

@while

  • While döngüleri aşağıdaki gibi kullanılır.
.scss
$sayi: 1;
@while $sayi<3{
  .item-#{$sayi} {
    color: red;
    $sayi: $sayi + 1;
  }
}.css
.item-1 {
  color: red; 
}
.item-2 {
  color: red; 
}

@for

  • İstenilen sayıda döngü oluşturmak için for yapısı kullanılır.
  • Aşağıdaki örnekte through kelimesi kullanılarak 1’den 3’e kadar olan sayılar ile döngü oluşturulmuştur.
.scss
@for $i from 1 through 3{
   .box-#{$i} {
      width: 2px * $i;
   }
}.css
.box-1 {
  width: 2px;
}.box-2 {
  width: 4px;
}.box-3 {
  width: 6px;
}
  • Aşağıdaki örnekte to kelimesi kullanılarak 1’den 2’ye kadar olan sayılar ile döngü oluşturulmuştur.
.scss
@for $i from 1 to 3{
   .box-#{$i} {
      width: 2px * $i;
   }
}.css
.box-1 {
  width: 2px;
}
.box-2 {
  width: 4px;
}
  • For döngülerinde 1 through 3 denildiğinde 3 dahil edilir, ancak 1 to 3 denildiğinde 3 dahil edilmez.

@each

  • Each döngüsü, list ve map türündeki veriler içerisinde gezinmek için kullanılır.
.scss
@each $i in (normal, bold, italic) {
    .my-#{$i} {
      font-weight: $i;
    }
}.css
.my-normal {
  font-weight: normal;
}.my-bold {
  font-weight: bold;
}.my-italic {
  font-weight: italic;
}

Sass Dosya Yapısı

  • Sass, modülerliğe izin veren bir dildir ve bu modülerlikle birlikte standartlaşan bir dosya yapısı vardır. Aşağıdaki örnek, çoğunlukla tercih edilen dosya yapısıdır.
  • Dosyalama yönteminde main.scss hariç tüm dosyaların başında alt çizgi işareti vardır. Bunun sebebi, diğer dosyaların birer modül olması ve main.scss dosyasında birleştirilecek olmasıdır. Bu yazım şekli, Sass compiler araçlarının o dosyaları görmezden gelip, sadece ana dosyayı dönüştürmesini sağlar.
sass/
  base/
    _reset.scss        // Sıfırlama
    _typography.scss   // Tipografiabstracts/
    _variables.scss    // Değişkenler
    _functions.scss    // Fonksiyonlar
    _mixins.scss       // Mixinler
    _helpers.scss      // Diğer araçlarcomponents/
    _buttons.scss      // Butonlar
    _slider.scss       // Sliderlayout/
    _grid.scss         // Grid yapı
    _navigation.scss   // Navigasyon
    _header.scss       // Header
    _footer.scss       // Footer
    _sidebar.scss      // Sidebarpages/
    _home.scss         // Anasayfa
    _contact.scss      // İletişimvendors/
    _bootstrap.scss    // Bootstrap
    _jquery-ui.scss    // Jquery UImain.scss            // Ana dosya

BEM Metodolojisi

BEM; CSS ve Sass gibi pek çok dilde kullanılabilen bir yazım metodolojisidir. Sass ile verimli bir şekilde kullanılan bu metodoloji hakkında bazı temel bilgilere değineceğim, ayrıntılı bilgi için metodolojiye ait resmi dokümantasyonu inceleyebilirsiniz.

  • BEM metodolojisinde sadece class seçiciler kullanılır, etiket seçici veya özel seçiciler kullanılmaz.
<body class="body">
</body>.body {
  margin: 0;
  padding: 0;
}
  • Tüm class isimleri küçük harflerle yazılır.
  • Class isimlerindeki boşluklar, düz çizgi - ile ifade edilir.
<div class="btn-danger">
</div>
  • Ebeveyn öğe ile çocuk öğenin arasındaki ilişkiyi göstermek için, sınıf isimlerinde çift alt çizgi __kullanılır.
<nav class="menu">
  <ul class="menu__list">
  </ul>
</nav>
  • Yukarıdaki örnek, ebeveyn öğe ile çocuk öğenin ilişkisini gösterir. Ancak bu çift alt çizgi, bir sınıf isminde sadece bir defa kullanılabilir. Torun öğe veya diğer alt öğeleri göstermek için kullanılamaz.
  • Özellik, versiyon veya durum bildirmek için tek alt çizgi _ kullanılır. Önceki sürümlerde çift çizgi -- kullanılmaktaydı ancak yeni bir güncelleme ile değiştirildi.
<nav class="menu">
  <ul class="menu__list">
    <li class="list-item list-item_active"></li>
  </ul>
</nav>
  • BEM metodolojisi ile isimlendirilmiş bir başka örnek
<div class="cta">
    <h1 class="cta__title"></h1>  
  
    <form class="form">      
        <div class="field"> 
            <label class="field__label"></label>
            <input class="field__input">
        </div>
    
        <button class="btn"></button>
    </form>
</div>

Gömülü Fonksiyonlar (Built-In Functions)

Sass, pek çok programlama dili gibi önceden tanımlı fonksiyonlara yer verir. Bu fonksiyonlara ve açıklamalarına aşağıdaki linklerden ulaşabilirsiniz.

En sık kullanılan iki fonksiyon lighten() ve darken() fonksiyonlarıdır. Verilen rengi, verilen yüzde oranında koyulaştırır veya açıklaştırır.

.scss
body {
  color:lighten(#000000, 10);
  background-color: darken(#ffffff, 10);
}.css
body {
  color: #1a1a1a;
  background-color: #e6e6e6;
}

Gömülü Modüller (Built-In Modules)

Sass dilinin gömülü kütüphanelerinin listesi aşağıdadır, içerikleri hakkında ayrıntılı bilgi almak için resmi sitedeki ilgili bölümü inceleyebilirsiniz.

  • sass:math
  • sass:color
  • sass:selector
  • sass:string
  • sass:list
  • sass:map
  • sass:meta

Tüm yazılarımın kategorize edilmiş bir listesine aşağıdaki linkten erişebilirsiniz.
https://github.com/oguzhanuyanik-sr/articles

Sass
CSS
Web Development
Sass Rehberi
Kodular

--

--

Oğuzhan Uyanık
Kodcular

Written by Oğuzhan Uyanık

7 Followers
Writer for

https://github.com/oguzhanuyanik-sr

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams