Sass'ta açıklama satırları
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: blockSass'ı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:blockBurada şö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: #9ab1c7Bu kodu derlediğimizde
sass --watch sass/deneme.sass:css/deneme.css --style compressedCSS 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.
/*!
* 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 !defaultYukarı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 !defaultBootstrap 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
- http://www.yunusbassahan.com/blog/sass/sass-yorum-satirlari.html
- http://www.sitepoint.com/css-sass-styleguide/
- http://createstopbecreative.com/2015/05/12/sass-practically-applying-comments/
- https://github.com/twbs/bootstrap/tree/v4-dev
