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

CSS4 sistem fontu (system-ui) değeri

Site hızının gittikçe önemini arttırmasıyla birlikte web sitesi geliştiricileri sitelerinin kullandığı her kaynağı iki kere sorgulamaya b...… Devamını oku