Sass dan Compass, Pertama Kali

Saya bantu teman yang pegang frontend di sebuah project. Sass 3.3 masih dalam development, kami pakai 3.2 stable. Compass adalah framework di atas Sass — punya helper untuk vendor prefix dan sprite generation.

Setup:

gem install compass
compass init my-project

Folder sass/ untuk source, css/ untuk output. Watch dengan compass watch.

Yang langsung berguna:

• Variables: $brand-red: #c41e1e; ganti satu tempat, semua update.
• Nesting: hierarki CSS jelas mengikuti DOM.
• Mixins: @include border-radius(4px) jadi vendor-prefixed otomatis.

$bg: #fdfaf3;

.article {
  background: $bg;
  padding: 1rem;
  
  h2 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
  }
  
  &.featured {
    background: lighten($bg, 5%);
  }
}

Tim CSS-nya senang. Tim build-nya nambah satu Ruby dependency. Trade-off acceptable.

LESS adalah saingan utama — pakai Node bukan Ruby, lebih cepat compile. Tapi Compass lebih matang.