Compass SASS – Reset style css

Sebelum membuat kode untuk berbagai style css, pertama kali yang biasa dilakukan adalah mereset style css terlebih dahulu.

Jika menuliskan kode style reset secara biasa akan banyak kode yang di tuliskan, lumayan menyita waktu.

Namun dengan menggunakan compass sass anda tidak perlu melakukan hal tersebut. Karena sudah ada yang buatkan kita tinggal panggil, dan bim salabim, kode reset muncul dengan sendirinya.

pada file style.scss tuliskan kode seperti berikut.

@import "compass/css3"
@import "compass/reset";
...

dibawahnya masukan kode scss yang lainya.

Langkah Awal Menggunakan Compass / SASS

Compass merupakan pengembangan dari sass, didalam compass terdapat kode-kode seperti library yang sudah dibuatkan, dan kita tinggal memanggilnya. Dengan kata lain pekerjaan kita akan lebih mudah jika menggunakan compass untuk membuat kode di scss. Jika ingin informasi lebih detail tentang compass bagaiana cara installnya dan descripsinya silahkan searching di google.

Baik jika sudah terinstall compass, kita akan mencoba membuat salah satu contoh awal pembuatan layout dengan menggunakan compass.

Pada command line atau cmd,

status kondisi berada pada direktori project. misal :

c:\xampp\htdocs\layout>

kemudian masukan perintah untuk membuat project compassnya, tuliskan kode dibawah

c:\xampp\htdocs\layout>compass create

jika di enter dengan otomatis akan membuat file-file project compass.

dan hasil di folder akan memunculkan file-file berikut.

folder sass berisikan file scss yang merupakan bahan untuk membuat file css.

folder stylesheets berisikan file css hasil dari scss.
file config.rb adalah file untuk konfigurasi dari compass.

sedangkan folder css diatas adalah , folder yang sudah saya siapkan, alias bukan hasil generate dari compass.

output default akan di simpan di folder stylesheets, jika ingin menggantinya ke folder css, maka, rubah tulisan stylesheets menjadi css pada baris ke 5, seperti dibawah.

css_dir = "css"

pada direktori stylesheets di hapus saja karena kita akan menggunakan folder scss, dan juga file-file di dalam folder sass di kosongkan karena kita tidak membutuhkannya.

lalu di dalam folder sass dibuat file bernama style.scss, sedangkan di dalam folder css di isi dengan file bernama style.css.

lalu kita buka file style.scss untuk memasukan kode scssnya.

@import "compass/css3";

.box {
 @include border-radius(4px);
}

langkah yang terpenting adalah sekarang mencoba merunning compass untuk membuat hasil output cssnya. caranya adalah masukan perintah di command line yang tadi yaitu :

compass watch

dan hasil di style.css setelah di running adalah seperti berikut

/* line 3, ../sass/style.scss */
.box {
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
}

bisa kita bandingkan kode di scss dan css, kita hanya menuliskan satu baris dan hasilnya beberapa baris, ini bisa memudahkan kita dalam menulis kode css.

cukup sekian bahasannya, ngartos? kalau belum ngartos bagus … berarti anda harus belajar lagi… hatur nuhun, wassalam.

 

 

 

Konsep Struktur File dalam Sass

Struktur file yang rapih akan membantu dalam pekerjaan saat kita melakukan koding, hal ini di butuhkan setiap pengkodingan apapun, kalau tidak dilakukan maka yang terjadi adalah pr di kemudian hari, dari pada lier alias pusing dikemudian hari lebih baik di antisipasi we dari sekarang.

Dalam pengkodean sass sebenernya bebas-bebas aja, tidak ada yang mengikat dalam konsep struktur file, bakal jalan-jalan saja. Namun, tidak ada salahnya kita coba buat sebuah struktur filenya biar rapih dan supaya bisa memudahkan kita dalam pengerjaan.

langsung wae ka intina. jadi untuk strukturnya sederhana adalah sebagai berikut :

root web
— index.html
— [sass]
—- _variable.scss
—- _layout.scss
— [css]
—- style.css

folder sass berisikan file-file master atawa bahan sass nya, folder css berisikan file output stye css nya. nah kurang lebih kitu.

*maaf kalau ada basa yang kurang dimengerti sebagian dalam rangka melestarikan budaya asli indonesia di dunia maya. harap dimaklum.

wassalam.

 

 

Belajar Sass Variable

Seperti halnya pemrograman, sass juga memiliki variabel dalam proses pembuatan css. sama dengan yang lainnya, variabel berfungsi untuk menyimpan nilai. Dan variable tersebut di sass berfungsi untuk lebih menyederhanakan penulisan kode.  Contoh kode penulisan sederhana

source scss

$warna : #cccccc;

body {
background-color : $warna;
}

hasil css

body {
background-color : #cccccc;
}

Apakah itu sass-scss ?

Untuk yang belum dengar sass-scss pasti masih bingung, dan bertanya apakah sass itu kode untuk tambahan extensi untuk di include kedalam website dan lain-lainya.

Setelah berselancar di google, gambaran untuk sass itu kurang lebih seperti ini definisinya dalam bahasa sono.

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

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.

Untuk web sass nya silahkan buka di :

http://sass-lang.com/

Sass bukan pengganti dari css, namun sebuah alat untuk mempermudah dalam penulisan kode css. Dalam penulisan kodenya awalnya dalam format berekstensi scss dan kemudian akan di konversi ke dalam format css sebagai outputnya.

Seperti dalam definisi sass, akan banyak fiture di dalamnya seperti ada variable (seperti pemrogaman php aja). bagi yang sudah terbiasa dengan css langsung. tidak ada salahnya belajar sass.

semoga bermanfaat.