SASS ile çalışmanın güzel yanlarından birisi de organize bir yapı oluşması olsa gerek. Önceden, bir sayfa üzerine farklı farklı CSS dosyalarını eklemek hem yönetimi zor, hem de performans açısından ( birden fazla HTTP requesti ) zararlı bir yöntemdi. SASS’la birlikte birçok farklı bölümleme ile stilleri düzenleyebilecek duruma geliyorsunuz.

Peki SASS ile Bölümleme Ne Demek ?

Bölümleme de neyin nesi diye soracak olursanız, kaynak dosyamızda:

If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file.

İşte bu kolaylık yardımıyla main.scss adı altında bir dosya oluşturabilir, içerisine de istediğiniz kadar bölüm ekleyebilirsiniz. Kendi projemden örnek verecek olursam, anime, mixins, fontface, media, responsive başlıkları altında bir çok küçük scss dosyam mevcut. Eğer responsive yapı ile ilgili bir hata olduğunda direk responsive dosyam üzerinde değişiklik yapıp sorunu halledebiliyorum:

[code lang=“css”] sass/ _variables.scss _mixins.scss _variables.scss _normalize.scss _boilerplate.scss _media.scss _responsive.scss [/code]

Eğer yeni bir *.scss dosyası eklemek istersek, hemen aşağıda bulunan main.scss’imize ekliyoruz:

[code lang=“css”] /*! * Vitamin v0.1 * * Copyright 2013 Vitamin * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world by @phyesix */

// Core variables and mixins @import “variables”; @import “mixins”;

// HTML5 Boilerplate @import “normalize”; @import “boilerplate”;

// Grid System @import “inGrid”; @import “anime”; @import “fontface”; [/code]

Çalıştığınız proje boyutu arttıkça doğal olarak böyle ayırarak her bir özellik için spesifik noktalara çok daha kolay ve hızlı bir şekilde gidip zaman kazanabiliyorsunuz. 10.000 satır css dosyasında bir yazının fontunu değiştirmek istediğimizde öyle tek tek aramak yerine direk fontface dosyamızın içerisinde değişikliği yapıp sorunu halletmek ise, paha biçilemez.