Belajar Less : Pengenalan - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Belajar Less : Pengenalan, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel less,
Artikel Pemrograman Web, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Belajar Less : Pengenalan
link : Belajar Less : Pengenalan
LESS merupakan salah satu pengembangan bahasa CSS, namun bukan pada sisi penambahan fungsi, property maupun value, LESS lebih kearah kemudahan dan kecepatan penulisan bahasa CSS yang telah ada. Boleh dikatakan, bahwa LESS hanyalah sebuah cara penulisan CSS pra pengolahan (seperti halnya bahasa side server; php, asp) yang digunakan sebagai jembatan antara CSS dengan browser.
LESS adalah preprocessor (pra pengolahan) yang merupakan cara lain dalam menuliskan kosakata CSS, penulisan menggunakan bahasa preproccesed (pra olah/mentah) dan kemudian dikonversi (compile) ke dalam bahasa CSS murni baik dengan cara dikonversi langsung kedalam bahasa CSS murni maupun tanpa dikonversi dengan menambahkan mesin side server LESS agar browser mampu mengkonversinya. Jika kita biasanya menulis bahasa CSS secara manual, LESS selangkah lebih maju dan lebih modern dari cara penulisan kosakata bahasa CSS yang primitif. Walau begitu bukan berarti LESS merupakan tool layaknya teks editor, justru LESS dapat dituliskan pada hampir semua teks editor murni (Native Text Editor). LESS merupakan tata cara atau aturan penulisan cepat kosakata bahasa CSS dan kemudian dikonversi serta disusun ulang menjadi bahasa CSS murni sesuai dengan aturan baku bahasa CSS yang bisa dirender oleh browser. LESS lebih fleksibel dan dinamis, karena kita bisa menggunakan bahasa sendiri dalam penulisannya sebagai variabel, interpolasi, nesting, mixin, operasi dan fungsi, namun demikian property dan value harus tetap sesuai aturan bahasa CSS.
Masih bingung? Intinya begini, dengan LESS kita akan membuat kode CSS yang kita miliki menjadi lebih simpel dan lebih cepat serta lebih mudah ketika diubah.
Amber Weinberg, pada artikelnya yang berjudul "January's 12412: Researching LESS & SASS", mengangkat tema mengenai kemungkinan masalah yang mungkin muncul dalam penggunaan preprocessor. Masalah yang mungkin timbul dari penggunaan preprocessor CSS menurut Amber antara lain:
Isu dari masalah diatas adalah kesulitan mengkomunikasikan antara satu pengembang dengan pengembang lain terutama bagi mereka yang bekerja dalam sebuah tim. Ketika anda menggunakan bahasa fleksibel sesuai keinginan anda sendiri, belum tentu anggota tim lain akan mampu memahaminya dengan cepat, justru hal ini akan menjadi kendala ketika pekerjaan kita merupakan pesanan klien. Sedangkan klien yang membeli karya kita mempekerjakan orang lain dalam pemeliharaannya. Namun, masalah ini hanya muncul apabila kita menggunakan metode side server (menggunakan file JavaScript LESS sebagai compiler) dalam mengkonversi LESS. Toh, ini tidak akan menjadi kendala apabila LESS dikonversi terlebih dahulu secara lokal (pada komputer kita) menjadi file CSS biasa dan baru kita menyerahkan file CSS biasa tersebut kepada klien atau anggota tim lain. Dan atau untuk menghindari kesulitan komunikasi antara anggota tim, dibuat kesepakatan bersama mengenai penggunaan bahasa LESS dalam kerja tim kita. Namun, isu masalah ini akan tetap menjadi kendala ketika kita harus merubah suatu kebiasaan dan ketika anggota tim lain tidak bersedia untuk beralih menggunakan preprocessor LESS. Jadi, semua ini kembali pada diri kita sendiri. Tetap menuliskan CSS seperti biasa, atau mulai menggunakan preprocessor LESS agar lebih cepat dan sederhana dalam penulisannya?
Sebagai permulaan untuk memahami LESS, kita akan belajar menuliskan LESS dan mengkonversinya menjadi file CSS biasa secara lokal saja. Jika anda menelusuri situs resmi LESS, maka akan ditemukan dua metode konversi file LESS, yaitu:
Beberapa aplikasi yang disebutkan, digunakan sebagai Compiler LESS, sehingga kita bisa langsung mengkonversi file LESS menjadi file CSS standar. Bahkan contoh yang disertakan bisa langsung dirender melalui browser, atau bisa di-compile menggunakan aplikasi dibawah ini:
Bagaimana dengan persiapan awal sebelum belajar menulis LESS? Jika sudah siap, dibawah ini tidak akan diberikan contoh yang panjang lebar hingga memusingkan, namun kita akan mencoba memahami dasar-dasar dari LESS. Contoh dibawah ini lebih baik anda coba tulis sendiri sehingga terlihat hasilnya. Kemudian pahami dengan baik, agar kita mampu merasakan manfaat dan perbedaannya antara menulis CSS biasa dengan menulis LESS.
Contoh penggunaan LESS akan dibahas secara terstruktur hingga menghasilkan suatu objek tertentu dan contoh yang akan dibahas menggunakan metode kompilasi Side-Client (Unduh file contoh terlebih dahulu sebagai pembanding). Ini berarti file LESS tidak perlu di-compile menggunakan aplikasi yang disebutkan diatas, karena kita akan menggunakan less.js sebagai compiler dengan proses konversi secara langsung pada browser (gunakan browser Firefox untuk melihat hasilnya, karena browser lain kurang bahkan tidak mendukung metode side-client untuk LESS).
Sisipkan link file .less pada dokumen HTML anda dengan setting rel dengan stylesheet/less
Unduh file less.js dan masukan pada dokumen HTML anda
Pastikan bahwa file stylesheet ditempatkan sebelum script, sehingga persiapan awal dokumen kurang lebih menjadi seperti dibawah ini:
style.less merupakan file yang akan kita kembangkan sebagai contoh pada langkah berikutnya. Ini berarti anda harus mempersiapkan Text Editor untuk menulis file HTML dan LESS.
Mungkin hanya itu saja artikel tentang Belajar Less : Pengenalan, artikel ini akan dilanjutkan ke artikel Belajar Less : Pengenalan Part2, jadi jangan lupa selalu simak materi tentang LESS ini, wassalam.
Anda sekarang membaca artikel Belajar Less : Pengenalan dengan alamat link https://dev-create.blogspot.com/2019/12/belajar-less-pengenalan.html
Judul : Belajar Less : Pengenalan
link : Belajar Less : Pengenalan
Belajar Less : Pengenalan
Apa Preprocessor LESS?
LESS merupakan salah satu pengembangan bahasa CSS, namun bukan pada sisi penambahan fungsi, property maupun value, LESS lebih kearah kemudahan dan kecepatan penulisan bahasa CSS yang telah ada. Boleh dikatakan, bahwa LESS hanyalah sebuah cara penulisan CSS pra pengolahan (seperti halnya bahasa side server; php, asp) yang digunakan sebagai jembatan antara CSS dengan browser.
LESS adalah preprocessor (pra pengolahan) yang merupakan cara lain dalam menuliskan kosakata CSS, penulisan menggunakan bahasa preproccesed (pra olah/mentah) dan kemudian dikonversi (compile) ke dalam bahasa CSS murni baik dengan cara dikonversi langsung kedalam bahasa CSS murni maupun tanpa dikonversi dengan menambahkan mesin side server LESS agar browser mampu mengkonversinya. Jika kita biasanya menulis bahasa CSS secara manual, LESS selangkah lebih maju dan lebih modern dari cara penulisan kosakata bahasa CSS yang primitif. Walau begitu bukan berarti LESS merupakan tool layaknya teks editor, justru LESS dapat dituliskan pada hampir semua teks editor murni (Native Text Editor). LESS merupakan tata cara atau aturan penulisan cepat kosakata bahasa CSS dan kemudian dikonversi serta disusun ulang menjadi bahasa CSS murni sesuai dengan aturan baku bahasa CSS yang bisa dirender oleh browser. LESS lebih fleksibel dan dinamis, karena kita bisa menggunakan bahasa sendiri dalam penulisannya sebagai variabel, interpolasi, nesting, mixin, operasi dan fungsi, namun demikian property dan value harus tetap sesuai aturan bahasa CSS.
Masih bingung? Intinya begini, dengan LESS kita akan membuat kode CSS yang kita miliki menjadi lebih simpel dan lebih cepat serta lebih mudah ketika diubah.
Kemungkinan Masalah Preprocessor CSS
Amber Weinberg, pada artikelnya yang berjudul "January's 12412: Researching LESS & SASS", mengangkat tema mengenai kemungkinan masalah yang mungkin muncul dalam penggunaan preprocessor. Masalah yang mungkin timbul dari penggunaan preprocessor CSS menurut Amber antara lain:
- Apa yang terjadi jika pengembang lain perlu mengedit CSS dan tidak tahu atau menyadari penggunaan preprocessor pada situs yang dikelolanya?
- Ketika menulis CSS dalam sebuah tim, bagaimana Anda mengontrol struktur dan pengorganisasian dari kode?
- Apa yang terjadi jika JavaScript dinon-aktifkan?
Isu dari masalah diatas adalah kesulitan mengkomunikasikan antara satu pengembang dengan pengembang lain terutama bagi mereka yang bekerja dalam sebuah tim. Ketika anda menggunakan bahasa fleksibel sesuai keinginan anda sendiri, belum tentu anggota tim lain akan mampu memahaminya dengan cepat, justru hal ini akan menjadi kendala ketika pekerjaan kita merupakan pesanan klien. Sedangkan klien yang membeli karya kita mempekerjakan orang lain dalam pemeliharaannya. Namun, masalah ini hanya muncul apabila kita menggunakan metode side server (menggunakan file JavaScript LESS sebagai compiler) dalam mengkonversi LESS. Toh, ini tidak akan menjadi kendala apabila LESS dikonversi terlebih dahulu secara lokal (pada komputer kita) menjadi file CSS biasa dan baru kita menyerahkan file CSS biasa tersebut kepada klien atau anggota tim lain. Dan atau untuk menghindari kesulitan komunikasi antara anggota tim, dibuat kesepakatan bersama mengenai penggunaan bahasa LESS dalam kerja tim kita. Namun, isu masalah ini akan tetap menjadi kendala ketika kita harus merubah suatu kebiasaan dan ketika anggota tim lain tidak bersedia untuk beralih menggunakan preprocessor LESS. Jadi, semua ini kembali pada diri kita sendiri. Tetap menuliskan CSS seperti biasa, atau mulai menggunakan preprocessor LESS agar lebih cepat dan sederhana dalam penulisannya?
Compiler Preprocessor LESS
Sebagai permulaan untuk memahami LESS, kita akan belajar menuliskan LESS dan mengkonversinya menjadi file CSS biasa secara lokal saja. Jika anda menelusuri situs resmi LESS, maka akan ditemukan dua metode konversi file LESS, yaitu:
- Penggunaan Client-Side; Dengan memasang file less.js pada dokumen HTML. Less.js digunakan sebagai compiler agar browser mampu membaca file LESS, kemudian Less.js akan melakukan permintaan fungsi Ajax untuk memanggil file LESS anda. Hal ini sangat tidak efisien dalam hal kinerja dan harus dihindari dalam penggunaan hasil produksi. Apalagi jika JavaScript dinon-aktifkan, maka halaman anda akan hancur berantakan. Tetapi jika anda ingin menggunakan sebagai prototype dengan menggunakan LESS dengan cepat, hal ini syah-syah saja.
- Penggunaan Server-Side; dengan cara meng-install NPM (Node Package Manager) atau Ruby pada komputer sebagai compiler. Namun jika anda tidak terbiasa dengan penggunaan perintah command-line, maka hindari juga menggunakan cara ini. Walaupun sebernarnya cara ini sangat efisien bagi yang terbiasa dengan perintah command-line.
- Aplikasi GUI Compiler LESS; Selain dengan dua metode diatas, kita ternyata bisa menulis LESS secara lokal (komputer sendiri) dan kemudian mengkonversinya menjadi CSS standar dengan bantuan aplikasi compiler LESS. Aplikasi-aplikasi Compiler LESS bisa dilihat dan dipilih pada bagian berikutnya.
Aplikasi GUI Compiler LESS
Beberapa aplikasi yang disebutkan, digunakan sebagai Compiler LESS, sehingga kita bisa langsung mengkonversi file LESS menjadi file CSS standar. Bahkan contoh yang disertakan bisa langsung dirender melalui browser, atau bisa di-compile menggunakan aplikasi dibawah ini:
- Crunch; Merupakan rekomendasi penulis, karena; tampilannya yang sederhana, berjalan disemua sistem operasi, menggunakan framework AdobeAIR, dapat langsung digunakan sebagai teks editor.
- SimpLESS; Aplikasi GUI ini hampir mirip dengan Crunch hanya saja tidak bisa digunakan sebagai teks editor. SimpLESS hanyalah compiler, namun mampu berjalan pada semua sistem operasi.
- WinLESS; Aplikasi ini juga hanya compiler saja, tanpa kemampuan Text Editor, hanya berjalan pada Sistem Operasi Microsoft Windows, namun dapat diintegrasikan dengan Teks Editor.
- Codekit; aplikasi GUI Compiler Preprocessor khusus untuk pengguna Mac dan rekomendasi para pengembang preprocessor karena kemampuannya dalam menulis dan mengkonversi hampir semua preprocessor (SASS, LESS, Stylus).
- masih banyak lagi
Dasar Penulisan Preprocessor LESS
Bagaimana dengan persiapan awal sebelum belajar menulis LESS? Jika sudah siap, dibawah ini tidak akan diberikan contoh yang panjang lebar hingga memusingkan, namun kita akan mencoba memahami dasar-dasar dari LESS. Contoh dibawah ini lebih baik anda coba tulis sendiri sehingga terlihat hasilnya. Kemudian pahami dengan baik, agar kita mampu merasakan manfaat dan perbedaannya antara menulis CSS biasa dengan menulis LESS.
Integrasi Compiler Side-Client
Contoh penggunaan LESS akan dibahas secara terstruktur hingga menghasilkan suatu objek tertentu dan contoh yang akan dibahas menggunakan metode kompilasi Side-Client (Unduh file contoh terlebih dahulu sebagai pembanding). Ini berarti file LESS tidak perlu di-compile menggunakan aplikasi yang disebutkan diatas, karena kita akan menggunakan less.js sebagai compiler dengan proses konversi secara langsung pada browser (gunakan browser Firefox untuk melihat hasilnya, karena browser lain kurang bahkan tidak mendukung metode side-client untuk LESS).
Sisipkan link file .less pada dokumen HTML anda dengan setting rel dengan stylesheet/less
<link rel="stylesheet/less" type="text/css" href="style.less">
Unduh file less.js dan masukan pada dokumen HTML anda
<script src="less-1.3.0.min.js" type="text/javascript"></script>
Pastikan bahwa file stylesheet ditempatkan sebelum script, sehingga persiapan awal dokumen kurang lebih menjadi seperti dibawah ini:
<!DOCTYPE html> <html> <head> <link rel="stylesheet/less" type="text/css" href="style.less"> <script src="less-1.3.0.min.js" type="text/javascript"></script> </head> <body></body> </html>
style.less merupakan file yang akan kita kembangkan sebagai contoh pada langkah berikutnya. Ini berarti anda harus mempersiapkan Text Editor untuk menulis file HTML dan LESS.
Mungkin hanya itu saja artikel tentang Belajar Less : Pengenalan, artikel ini akan dilanjutkan ke artikel Belajar Less : Pengenalan Part2, jadi jangan lupa selalu simak materi tentang LESS ini, wassalam.
Demikianlah Artikel Belajar Less : Pengenalan
Sekianlah artikel Belajar Less : Pengenalan kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Belajar Less : Pengenalan dengan alamat link https://dev-create.blogspot.com/2019/12/belajar-less-pengenalan.html
