Tutorial Dasar Css Preprocessor Less

24 views

Salam sobat jagocoding.. Udah usang banget nih ya ane ga bikin tutorial lagi.. Secara, kehabisan pandangan gres duluan.. Bingung mau bikin tutorial apa lagi sekitaran CSS.. Hehehe..

Karena itu, kali ini saya mau sedikit share masih sekitaran di CSS juga.. tapi CSS yg ini agak beda dari yg pada umumnya, alasannya kita akan memakai derma library javascript preprocessor CSS yg cukup terkenal, yaitu LESS.. Buat yang belom tau,, LESS yakni CSS preprocessor yang akan sangat membantu pekerjaan kita di sekitaran CSS.. Untuk dokumentasi lengkap dan downloadnya, mampir aja ke http://lesscss.org.

Fitur LESS inipun bekerjsama sangat banyak.. Tapi fitur yg paling saya suka yakni Nesting Selector, penggunaan variabel, dan Mixin.. Di tutorial ini kita akan mencoba ketiga fitur tersebut..

Pertama-tama, kita download dulu file javascript library Lessnya di http://cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js. Mau di download ataupun di panggil pribadi di HTMLnya nggak masalah.. Dlm tutorial ini saya download aja deh, Sekarang kita ke HTMLnya. Bikin kerangka HTML utamanya ibarat biasa ibarat dibawah ini..

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Latihan CSS Less</title><link rel="stylesheet/less" href="style.less"><script type="text/javascript" src="js/less.min.js"></script></head><body></body></html>

OK, dari penggalan baris instruksi diatas, sasaran library LESSnya diadaptasi dengan lokasi anda. Dan yang paling penting, di tag link bab atribut rel, jika biasanya hanya bernilai “stylesheet” saja, untuk memakai less ini nilai atribut rel harus “stylesheet/less”. target atribut hrefnya juga diadaptasi dengan lokasi file LESS kita.. Ingat ya,, ekstensinya harus LESS,, bukan CSS.. 😀

 

Fitur Nesting Selector

Kalau hingga disini sudah dilakukan dengan benar, kita akan lanjut mengenal ketiga fiturnya.. yg pertama fitur Nesting Selector. Sebelumnya, kita isi tag body dengan beberapa tag dulu untuk percobaan ya..

<div id="container"><div class="header"><a href="index.html" class="judul">Judul Website</a><nav><a href="">Home</a><a href="">Profile</a><a href="">Gallery</a><a href="">About Us</a></nav></div><div class="content">Isi konten website</div><div class="footer">&copy; 2015.</div></div>

Sejauh ini masih nggak ada hal yang berbeda ya? Sekarang kita ke CSS deh.. CARA BIASANYA,, kira-kira ibarat ini nih untuk mendesainnya..

#container{width:960px;margin:0px auto;position:relative;}.clear{clear:both;}.header{position:relative;padding:10px;background:#99aaff;}.header a.judul{font-family:'Calibri',sans-serif;font-size:24px;color:#fff;float:left;}.header nav{float:right;}.header nav a{color:#000;font-family:'calibri',sans-serif;}.content{padding:10px;}.footer{font-style:italic;background:#333;color:#ccc;}

Dari 38 baris tadi, akibatnya ya tidak mengecewakan lah..

Sekarang, kita akan menciptakan hasil yang sama persis dengan fitur Nested Selector LESS.

 

#container{width:960px;margin:0px auto;position:relative;.header{position:relative;padding:10px;background:#99aaff;a.judul{font-family:'Calibri',sans-serif;font-size:24px;color:#fff;float:left;}nav{float:right;a{color:#000;font-family:'calibri',sans-serif;}}}.content{padding:10px;}.footer{font-style:italic;background:#333;color:#ccc;}}.clear{clear:both;}

 Apakah anda melihat sesuatu yang aneh? Ya,, Dalam fitur Nested Selector ini, selector yang mempunyai anak tidak lagi harus ditulis ulang ibarat CSS biasa, melainkan sanggup pribadi ditulis didalamnya. Kalau kurang jelas, lihat citra instruksi dibawah ini :

/*CSS BIASA*/tag_1{....properti tag_1...}tag_1 tag_2{ /*mengarah ke tag 2 yg merupakan anak dari tag_1*/......properti tag_2.....} /*LESS CSS*/tag_1{.....properti tag_1.....tag_2{ ....properti_tag2....}/*tag parent tidak perlu diketik ulang, asal ditaruh didalam tag parent yang bersangkutan*/}

 Semoga fitur Nested Selector ini sanggup dimengerti ya.. Buat yang udah biasa bikin kegiatan yang berkurung-kurung sih niscaya udah biasa banget sama model beginian.. 😀

 

Fitur Variabel

Siapa kira variabel cuma ada di bahasa pemrograman aja? Dengan LESS, CSS pun juga sanggup divariabelin.. Variabel di LESS ini ibarat kayak PHP, nggak perlu deklarasi tipe data.. 😀 Kalo di PHP variabel didefinisiin pake simbol $, di LESS simbolnya yakni @. Coba saja kita edit file LESS kita tadi.. Pertama-tama kita buat variabel dulu ibarat penggalan instruksi dibawah, kemudian panggil variabel tersebut di bab yang kita inginkan.

@lebar_website:960px;@warna:#99aaff;#container{width: @lebar_website;......header{.....background:@warna;}}

Keuntungan penggunaan variabel ini adalah, kita sanggup memakai suatu nilai kapan saja dimana saja hanya dengan memanggil nama variabelnya saja.

 

 

Fitur Mixins

Ini yakni salah satu fitur paling asik yang bikin saya betah pake LESS.. 😀 Kalau dalam bahasa pemrograman, Mixin ini sanggup disetarakan dengan Function. Sama ibarat function, Mixin sanggup dijalankan dengan inputan maupun tanpa inputan. Mixin ini sangat mempunyai kegunaan untuk kita sanggup menciptakan beberapa baris instruksi hanya dengan memanggil nama mixin atau fungsinya.

Mixin ini paling asik diterapkan di CSS3. Anggaplah kita punya 4 tag yang akan kita berikan efek transisi otomatis. Cara CSS biasanya ibarat ini : 

tag_1{transition:0.5s;-moz-transition:0.5s;-webkit-transition:0.5s;-o-transition:0.5s;-khtml-transition:0.5s;-ms-transition:0.5s;}tag_2{transition:0.75s;-moz-transition:0.75s;-webkit-transition:0.75s;-o-transition:0.75s;-khtml-transition:0.75s;-ms-transition:0.75s;}tag_3{transition:0.25s;-moz-transition:0.25s;-webkit-transition:0.25s;-o-transition:0.25s;-khtml-transition:0.25s;-ms-transition:0.25s;}tag_4{transition:1s;-moz-transition:1s;-webkit-transition:1s;-o-transition:1s;-khtml-transition:1s;-ms-transition:1s;}

Sangat panjang bukan? Ya memang sih yang bikin panjang itu sebenernya si prefix -moz-, -webkit-, dan teman2nya.. Tapi dengan mixin, sekian baris kegiatan tadi sanggup dipersingkat menjadi ibarat ini : 

/*MIXIN. Formatnya ibarat mirip class, tapi ada kurung buka dan tutupnya*/.transisi(@durasi){transition:@durasi;-moz-transition:@durasi;-webkit-transition:@durasi;-o-transition:@durasi;-khtml-transition:@durasi;-ms-transition:@durasi;}tag_1{.transisi(0.5s);}tag_2{.transisi(0.75s);}tag_3{.transisi(0.25s);}tag_4{.transisi(1s);}/*selesaii

Author: 
    author
    No related post!