LPKIA Pemrograman WEB 3 MI-3 : Apa itu 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. namun sekarang ada Compass & Sass . apa itu Compass & Sass ??? kita bahas sekarang .

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.

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. 

Variable

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/* .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

1 2 3 4 5 6 7 8 9 10 11 12

/* 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

/* 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/* .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

1 2 3 4 5 6 7 8 9 10 11 12 13

/* 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/* .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* 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.

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,

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