tarihinde Fatih Hayrioğlu

Açıklama satırlarının önemini tekrar anlatmaya gerek yok. Bir çok zaman unuttuğumuz veya iki kelime ile geçiştirdiğimiz açıklama satırları takım çalışmaları ve uzun süreli projelerin olmazsa olmazı. Yani tüm projelerin :)

Sass CSS’in açıklama satırı kullanımını aynen destekler.

/* Programcının kodu 
 * okuyup anlayamacağı 
 * noktalarını yazalım */
.yildiz
    display: block

Sass’ın CSS’te olmayan tek satırlık açıklama satırı desteği de vardır. Javascript’ten alışık olduğumuz iki bölme işareti ( // ) ile kullanılır.

/* Programcının kodu 
 * okuyup anlayamacağı 
 * noktalarını yazalım */
.yildiz
    // Her şeyi yazalım
    display:block

Burada şöyle bir durum var. Tek satırlık açıklama satırları CSS tarafından desteklenmediği için bu açıklama satırları derlenince silinecektir. Yukarıdaki kodun CSS çıktısı

/* Programcının kodu
 * okuyup anlayamacağı 
 * noktalarını yazalım */
.yildiz {
  display: block;
}

şeklinde olacaktır. CSS standardı olan açıklama satırları dururken tek satırlık açıklama satırı silinmiştir. Bu genelde istenen bir özelliktir.

Ayrıca sass’ınızı sıkıştırıyorsanız açıklama satırlarınız sıkıştırma sırasında silinir. Silinmemesini istiyorsanız açıklama satırınız /*! ile başlamalıdır.

/*! Programcının kodu
 * okuyup anlayamacağı 
 * noktalarını yazalım */
body
  background-color: #9ab1c7

Bu kodu derlediğimizde

sass --watch sass/deneme.sass:css/deneme.css --style compressed

CSS kod çıktısı

/*! Programcının kodu
 * okuyup anlayamacağı 
 * noktalarını yazalım */ body{background-color:#9ab1c7}.deneme{width:450px;height:250px;display:block;position:relative;top:20px}.deneme h1{color:red}
/*# sourceMappingURL=deneme.css.map */

şeklinde olacaktır.

Sass’ın bize kazandırdığı değişken tanımlarını açıklama satırı içinde kullabiliyoruz.

$developer: 'Fatih Hayrioğlu'
$version : '1.0.1'

/* Bu site #{$developer} tarafından yazılmıştır. Sürümü #{$version}. */

CSS çıktısı

/* Bu site Fatih Hayrioğlu tarafından yazılmıştır. Sürümü 1.0.1. */
body {
...

şeklinde olacaktır.

Açıklama satırı ile düzenli kod blokları oluşturmak

Açıklama satırlarını belirli tiplere ayırarak kodlarımızı daha düzenli hale getirebiliriz. Bootstrap 4. sürümündeki örnekleri incelersek.

Giriş açıklama kodu.

/*!
 * Bootstrap v4.0.0-alpha (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

Tanımın başında /*! ile Sass derlemesinde yorumların silinmemesi için eklenmiş.

Genel dosya yapısını incelediğimizde örneğin _variables.scss dosyasına bakalım.

Ana başlıklar

// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
...
...
// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.

$btn-padding-x: 1rem !default
$btn-padding-y: .375rem !default
$btn-font-weight: normal !default

Yukarıdaki standarda baktığımızda ana başlıklar bir boşluk sonrasında bir açıklama alanı içeriyor.

İçindekiler tablosu

// Table of Contents
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Fonts
// Components

İçeriği büyük dosyalarda içerik tablosu kullanmak mantıklı.

Standart açıklama satırı

Kod aralarındaki açıklamalar için tek satırlık açıklama satırı eklenir.

// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
$font-size-root: 16px !default

Bootstrap güzel bir örnek ancak başka örneklerde mevcut onlarıda inceleyip benzer bir yapıyı kendi projelermize entegre edebiliriz.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Sass’ın temel yazım kurallarından biriside iç içe (nested) kullanımdır. CSS ile kod yazarken girintiler çok önemli değildir. Biz daha iyi bir düzen için girintileme yapıyorduk ama bu girintiler CSS için bir şey ifade etmiyordu. Sass’ta ise girintilerin bir anlamı ve işlevi var.

CSS ile kod yazarken ebeveyn ve çocuk seçicileri ilişkilerini ve seçici önem sırasını düzenlemek için kodlarımızda aşağıdaki gibi bir düzen kuruyorduk.

Genel bir menü kodu:

ul {
    listy-style: none;
    margin: 0;
    padding: 0;
}

ul li {
    margin-left: 10px;
}

ul li a {
    color: blue;
    text-decoration: none;
}

ul li a:hover {
    color: red;
}

ul li a:before {
    content: '';
    display:block;
}

yukarıda basit bir menü kodunu nasıl yazdığımızı gösterdik. Kodu incelediğimizde her satır ebeveyn ve çocuk seçicileri iletişimini belirtmek durmundayız. Sass burada çok güzel bir hareket yapıyor ve bu tekrardan bizi kurtarıyor. Yukarıdaki kodu Sass ile yazalım.

//renkleri buraya yazalım
$blue: blue
$red: red

ul
  listy-style: none
  margin: 0
  padding: 0
  
  li
    margin-left: 10px
    
    a
      color: $blue
      text-decoration: none
      
      &:hover
        color: $red
        
      &:before
        content: ''
        display: block

daha kolay yazım, temiz görünüm ve anlaşılır kod. İlk seçici solda dururken çocuk seçicileri bir sekme (tab) içerden başlayacak şekilde kodluyoruz.

Sözde sınıf ve elementleri ise ve imi (&) ile bitişik yazıyoruz. &:hover, &:before, &:first-child vd.

Ben bir sekmeyi 4 boşluk olacak şekilde kullanıyorum. 2 olarak kullanan da var. İki olarak kullananların kodu bana çok karışık geliyor.

Çok fazla iç içe seçici kullanımı kod okunurluğunu azaltıyor. Çözüm olarak bence bir prensip kararı alıp dört iç içe sekmede kendimizi sınırlamalıyız.

.birinci-seviye
    .ikinci-seviye
        .ucuncu-seviye
            .dorduncu-seviye

Böyle bir karar alıp uygulamak projelerinizde sizi rahatlatacaktır.

Ve imi (&) ile ebeveyn seçicisi

Sass ve imi (&) ile ebeveyn seçicisini referans alan bir yapıyı destekler. CSS’te bir çok defa aradığımız bir özellik olan ebeveyn seçme işi Sass sayesinde erişme imkanımız var.

ul
    margin: 0

    .ie8-fix &
        margin: -2px

CSS kodu;

ul {
  margin: 0;
}
.ie8-fix ul {
  margin: -2px;
}

İnternet Explorer 8 sürümünde margin sorunumuz olduğunu düşünün. CSS ile bu sorunu aşmak için altında veya ayrı bir dosyaya yazıyoruz. Bu kontrolü zorlaştırıyordu. Sass’daki kullanım ile daha derli toplu çözüm oluşturmuş oluruz. Bir çok kullanım yerinin olduğu ebeveyn seçicisi süper bir artı özellik.

Kardeş seçicisi

Genel kardeş ve bitişik kardeş seçicisi için

h1, 
h2, 
h3
  margin: 0

h1
  & + h2
    margin-top: 1em

gibi yazıldığı gibi.

h1, 
h2, 
h3
  margin: 0

h1
    + h2
        margin-top: 1em

şeklindeki yazımı da Sass destekler. Benzer şekilde ~, > kullanılabilir.

BEM kullanımı

BEM benzeri seçici kullanımını Sass 3.3’den sonra desteklemektedir.

BEM, CSS seçicilerini isimlendirme ve sınıflandırma için kullanılan çok daha kesin, şeffaf ve bilgilendirici bir yöntemdir.

.person--woman {
  display: block;
}
.person__hand {
  display: block;
}
.person__hand--left {
  display: inline;
}
.person__hand--right {
  display: inline;
}

Şeklinde bir örnek daha açıklayıcı olur. Burada Sass’ın avantajı

.person

  &--woman
    display:block
  
  &__hand
    display:block
    
    &--left
      display:inline
    
    &--right
      display:inline

Tekrarlardan kurtulmuş oluyoruz. Ben bu kullanımda şöyle bir sorun yaşadım: Seçicileri bulmak sıkıntı oluyor. Aramak zorlaşıyor.

İç içe özellik kullanımı

Yukarıdaki gibi iç içe seçici kullanımı benzeri iç içe özellik kullanımında da vardır.

h1 {
  text-align: "left";
  text-transformation: "capatalize";
  text-indent: 20px;
}

Sass ile yazarken

h1
  text:
    align: 'left'
    transformation: 'capatalize'
    indent: 20px

Seçicilerde olduğu gibi tekrarlardan kurtulmuş oluruz.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Sass hakkında bu kadar makale yazdıktan sonra bir sayfa oluşturmak gerekti.