Karena CSS Terlalu Mainstream, Saatnya Kamu Kenalan dengan Compass & Sass

Selama ini kita mengenal CSS dan merasa nyaman menggunakannya, CSS sudah kita anggap sebagai pasangan hidup dari HTML. Sebagaimana kita tahu bahwa fungsi CSS adalah membuat tampilan website kita kelihatan elegan, cantik dan sexy.

Sebagai seorang web developer kita merangcang bangun sebuah website untuk mendapatkan hasil yang bagus, website di buka oleh orang dengan keadaan rapi dan sempurna, tapi apakah kita tahu dibalik semua tampilan itu terdapat beribu baris kode yang amburadul? ya amburadul!

[related_posts]

Oke gini, pernahkan Anda mendapatkan proyek revisi sebuah website yang dulunya dikerjakan oleh orang lain? Ketika Anda intip kodenya ternyata Anda tercengang dan bingung dengan amburadulnya struktur kode tersebut dan Anda akan bilang, Gimana kalau kita develop dari awal saja? karena akan membutuhkan waktu yang lama bagi saya untuk memahami kode yang aneh ini :)) *pingsan.

compass-sass-css

Karena CSS terlalu mainstream, maka mari kita berkenalan dengan sebuah harapan masa depan yaitu Compass dan Sass.

Apa itu Sass?

Sass (Syntactically Awesome Stylesheets) adalah sebuah pengembangan dari CSS3 dengan menambahkan nested rules, variables, mixins, selector inheritance, dan banyak lagi. dia menerjemahkan css dengan struktur yang lebih baik.

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax. – Hampton Catlin

Apa kelebihan Sass?

  • CSS yang dihasilkan akan rapi dan mudah di mengerti.
  • Otomatis akan berjalan dengan baik di setiap browser.
  • Hasil output CSS akan lebih terstruktur.

Variable

Kita bisa mendivinisikan sebuah variable dan memenggilnya pada baris dimanapun kita butuhkan, juga kita bisa menggunakan perhitungan matematika sederhana.

/* .scss */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Ketika di compile maka akan menjadi

/* CSS */

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Nesting

Jika kita pakai Sass maka akan memungkinkan kita menulis baris kode yang bertingkat dengan hasil compile yang rapi dan mudah di pahami

/* .scss */

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

ketika di compile maka akan menjadi

/* CSS */

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

Mixin

Mixin lebih bagus dari Variable yang memungkinkan kita menggunakan kembali potongan kode css. misalkan jika kita banyak menggunakan rounded corner, maka tinggal dibuatkan sebuah mixin dan bisa kita panggil/pakai berulang.

/* .scss */

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}

ketika di compile maka akan menjadi

/* CSS */

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Selector Inheritance

Dengan selector inheritance kita dapat menggunakan properties yang sama dan membedakannya tanpa duplikasi css.

/* .scss */

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}

ketika kita compile maka akan menjadi

/* CSS */

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Dan masih banyak lagi fitur dari Sass yang layak kita gali.

Baca Juga:  Menggunakan 960gs untuk konversi PSD ke XHTML/CSS

Apa itu Compass

Compass adalah sebuah CSS Framework Open Source yang menggunakan bahasa Sass Stylesheet untuk membuat gaya penulisan stylesheet lebih powerful & mudah. Compass juga menyediakan sejumlah module dan mixin untuk membantu mengintegrasikan pola desain yang populer di web. Compass juga mendukung X-Browser CSS3 mixins: Rounded Corners, Gradients, Box Shadow, Text Shadow, dll.

Cara Install Compass & Sass

Pastikan komputer Anda sudah terpasang Ruby, jika Anda pengguna windows Anda dapat unduh Ruby disini. Untuk linux Unduhnya Ruby disini. untuk Mac & linux biasanya sudah tersedia.

Install Sass

Buka Terminal.app atau windows command dan ketikkan

windows
gem install compass

Mac / Linux
sudo gem install compass

jika proses installasi berjalan baik maka akan tampil kira-kira seperti ini
$ sudo gem install compass
Fetching: sass-3.1.3.gem (100%)
Fetching: compass-0.11.3.gem (100%)
Successfully installed sass-3.1.3
Successfully installed chunky_png-1.2.0
Successfully installed fssm-0.2.7
Successfully installed compass-0.11.3
4 gems installed

Dari sini Anda sudah berhasil install compass sass.

Membuat Project dengan Compass Sass

pada terminal ketikkan
compass create namafolder

Maka akan menghasilkan file seperti dibawah ini
struktur-project-sass-compass

Compile Sass ke CSS

Iya, ketika kita menggunakan Compass & Sass ini kita harus meng-compile agar menjadi file .css dengan mengetikkan
compass watch

Untuk lebih jelasnya dan dokumentasi lengkap Compass dan Sass Anda klik link ini Compass & Sass

Cukup mudah bukan? 🙂 pada tutorial selanjutnya kita akan coba latihan bikin sebuah contoh project menggunakan Compass dan Sass. Selamat Mencoba!

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage instagram türk takipçi satın al