Beberapa hari ini, penulis sedang mempelajari beberapa teknologi baru dengan tujuan ingin meningkatkan ilmu HTML CSS lebih lanjut. Salah satu yang menarik perhatian penulis adalah LESS. Apa itu LESS? LESS dikembangkan oleh Alexis Sellier di mana kelebihan utama dari LESS adalah menambahkan variable, mixins, operations and nested rules pada CSS kita. Hal ini membantu kita lebih cepat serta menyederhanakan penulisan koding CSS.
Persiapan
Ada beberapa hal yang perlu kita persiapkan terlebih dahulu sebelum kita memulai latihan LESS kita.
1. Text Editor
Untuk saat ini, text editor yang umum digunakan seperti Dreamweaver, Notepad++, Netbeans belum mendukung LESS. Jadi untuk mengedit file LESS, dari penulis menyarankan menggunakan text editor bernama Crunch App. Untuk mengedit file html, css dan lain-lain pembaca bisa menggunakan text editor yang pembaca suka. Dari penulis biasa menggunakan NetBeans.
2. Less.js
Mau mengunakan LESS tentu tak boleh lupa untuk download less.js-nya. Anda bisa men-download-nya di website official-nya. Untuk sekarang versi terbaru saat tulisan ini dibuat adalah versi 1.3.0.
3. Prefix Free
Sebenarnya ini bukan sesuatu yang benar-benar kita butuhkan, tetapi karena kita juga akan menyentuh CSS3, jadi ada baiknya kita juga menggunakan Prefix Free ini. Guna dari Prefix Free adalah kita tidak perlu lagi menulis -moz-, -webkit-, -o- pada sintaks CSS3 supaya bisa berjalan dengan baik di browser-browser yang kita inginkan. Prefix Free akan dengan secara otomatis mengkonversi sintaks CSS3 kita ke -moz-, -webkit- dan -o- sehingga kita cukup menulis sintaks standar CSS3 yang diperlukan. Untuk men-download Prefix Free, Anda bisa men-download-nya disini
4. Susunan
Oke, sekarang kita sudah mempunyai semua bahan yang kita perlukan untuk latihan LESS CSS. Mari kita bikin folder latihan. Di folder latihan kita buatkan 3 folder lagi dan beri nama css, images dan js. Bikin file index.html di dalam folder latihan. Masukkan less-1.3.0.min.js dan prefixfree.min.js ke dalam folder js. Bikin file style.css dan style.less dan letakkan dalam folder css. Sehingga bentuk akhirnya sesuai gambar berikut.
5. HTML Markup
Untuk bagian head HTML-nya tambahkan tag sesuai urutan susunan di bawah ini.
<link rel="stylesheet/less" type="text/css" href="css/style.less" media="screen, projection"/> <link rel="stylesheet" href="css/style.css" media="screen, projection"/> <script src="js/less-1.3.0.min.js" type="text/javascript"></script> <script src="js/prefixfree.min.js" type="text/javascript"></script>
Yang perlu diingat, tag less-1.3.0.min.js harus selalu diletakkan di bawah style.less dan prefixfree.min.js harus selalu diletakkan di bawah semua CSS.
Ok, sekarang kita telah selesai melakukan persiapan. Maka artikel ini juga selesai sampai di sini. Untuk artikel selanjutnya penulis akan memberikan beberapa contoh dan tutorial dalam menggunakan LESS.
Silahkan berikan pendapat kalian juga tentang tutorial yang diinginkan, penulis akan berusaha untuk membuat tutorialnya. Oh ya, bagi yang mau mendapatkan contoh tutorial di atas, bisa langsung download file-nya juga di sini.
[...] lagi dengan penulis dan tutorial penggunaan CSS LESS. Di tutorial sebelumnya kita telah melakukan persiapan untuk menggunakan CSS LESS, sekarang saatnya mencoba menggunakannya. Di tutorial kali ini, penulis akan mengajarkan bagaimana [...]
Mantabs gan,kebetulan lagi nyari2 framework buat CSS dan kyaknya merasa cocok dengan lessCSS ini. Tapi klo dari websitenya kyaknya gak support IE ya? Btw, udh pernah nyobain di IE blm? Soale ane nyoba gak bisa. Thanks.
LESS css support IE selama IE-nya mendukung js.
Tapi saya coba dengan menjalankan script dibawah, di IE (versi 8.0) tulisan HaPe masih berwarna hitam (gak jalan) sedangkan di Mozilla tulisannya berwarna merah (jalan). Mohon pencerahannya.
coba.html
Mencoba LessCSS
HaPe
styles.less
@nice-blue: red;
@light-blue: (@nice-blue + #111);
h1{ color: @light-blue; }
Sorry gan coba.html-nya ini scriptnya
<html>
<head>
<title>Mencoba LessCSS</title>
<link rel=”stylesheet/less” type=”text/css” href=”styles.less”>
<script src=”less-1.3.1.min.js” type=”text/javascript”></script>
</head>
<body>
<h1>HaPe</h1>
</body>
</html>
Note:
<:
Maaf baru reply sekarang.
saya ada mencoba code yang agan tulis dan ditempat saya tidak ada masalah sama sekali baik di IE7~9.
Paling coba cek apakah IE8 agan ada disable javascripts sehingga less.js nya tidak berjalan.
[...] http://www.computesta.com/blog/2012/04/tutorial-css-menggunakan-less-css-part-1/#.UagiaEBRDng [...]
Mau tanya dong gan..
cara mengabungkan style.css dengan style.less.
saya sudah memakai @import tetap tidak teresekusi script.a..
mohon bantuan.a gan..
Maksudnya mengabungkan? isi file style.css dan style.less tidak boleh digabung dalam 1 file loh…