Sass'ta açıklama satırları

1 Ekim 2015

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

Daha fazla oku

CSS İpucu 35 - dikey ve yatay tanımlar için pratik çözüm

Dikey ve yatay tanımlar için pratik çözüm Devamını oku

CSS aspect-ratio tanımı

16 January 2023 tarihinde yayınlandı.

progress elementini stillendirelim

30 December 2022 tarihinde yayınlandı.