Tutorial CSS: Menggunakan LESS CSS – Part 1
April 27th, 2012, Written by: | Categories: Programming, Tutorial

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.

Screenshot applikasi Crunch

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.

More about: , , ,

9 Responses to “Tutorial CSS: Menggunakan LESS CSS – Part 1”

  1. HaPe

    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.

    Reply
  2. HaPe

    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; }

    Reply
    • HaPe

      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:
      &lt:

      Reply
      • Charlie

        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.

        Reply
  3. yakasen

    Mau tanya dong gan..

    cara mengabungkan style.css dengan style.less.
    saya sudah memakai @import tetap tidak teresekusi script.a..
    mohon bantuan.a gan..

    Reply

Leave a Reply to Charlie

Click here to cancel reply.