Tutorial CSS: Menggunakan LESS CSS – Part 2
June 7th, 2012, Written by: | Categories: Programming, Tutorial

Kembali 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 melakukan variable, mixins, operations dan nested rules.

1. Variable

Kita mampu membuat variable sendiri dan dipakai berulang-ulang kali. Contoh penggunaannya:

@warna: #555;
header{
    background-color: @warna;
}

Hasilnya akan seperti:

header{
    background-color: #555;
}

2. Mixim

Mixim membuat kita dapat menggunakan class pada class lainnya. Contoh:

.border{
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ddd;
    border-top: 1px solid #eee;
    border-left: 1px solid #fff;
}
.box{
    .border;
    padding: 5px;
}

Hasilnya akan seperti:

.box{
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ddd;
    border-top: 1px solid #eee;
    border-left: 1px solid #fff;
    padding: 5px;
}

Kita juga dapat menggunakannya seperti funtions dengan menggabungkannya dengan variable, Contoh:

.rounded-corners(@radius: 5px){
    border-radius: @radius;
}
.box1{
    .rounded-corners;
}
.box2{
    .rounded-corners(10px);
}

Hasilnya akan seperti:

.box1{
    border-radius: 5px;
}
.box2{
    border-radius: 10px;
}

3. Nested Rules

Nested Rules memudahkan kita untuk tidak perlu menulis ulang lagi kode css kita setiap kali melakukan inheritance. Contoh:

#header{
    font-family: helvetica;
    font-size: 12px;
}
#header ul{
    list-style: none;
    float: left;
}
#header ul li{
    float: left;
    margin-right: 10px;
}
#header ul li a{
    color: #9ff;
}
#header ul li a:hover{
    text-decoration: underline;
}

Bisa kita singkatkan penulisannya menjadi:

#header{
    font-family: helvetica;
    font-size: 12px;
    ul{
        list-style: none;
        float: left;
        li{
            float: left;
            margin-right: 10px;
            a{
                color: #9ff;
                &:hover{
                    text-decoration: underline;
                }
            }
        }
    }
}

4.Operations & Functions

Dengan adanya fungsi operation, kita bisa menambahkurangkan ataupun mengkalibagikan semua variable yang ada. Otomatis kita dapat melakukan hal-hal yang biasa tidak dapat dilakukan dengan css. Contoh penggunaan:

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
}
#footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
}

Hasilnya:

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

Okay, sampai di sini artikel kita tentang LESS CSS. Semua fungsi di atas adalah dasar-dasar dari penggunaan LESS CSS. Kedepannya penulis akan memberikan contoh membuat beberapa efek dengan menggunakan LESS CSS. Bagi kalian yang ingin request untuk tutorial selanjutnya  bisa memberikan comment di bawah. Bye-bye

More about: , , ,

14 Responses to “Tutorial CSS: Menggunakan LESS CSS – Part 2”

  1. Joshua

    Sep gan, luar biasa gan.. Mantabs.. Mungkin bisa diimplement pake form biar lebih terlihat gan kegunaannya.. thanks for sharing..

    Reply
    • Charlie

      LESS sebenarnya adalah Javascript yang mengubah Code LESS CSS menjadi CSS biasa. Selama bukan javascript disable browser tidak masalah

      Reply
  2. Agung Wiseso

    Mantep nih penjelasannya.. jd pd dasarnya LESS ini hanya digunakan utk variable, mixins, operations dan nested rules ya? atau masih ada yg lainnya? saya baru mempelajari LESS, soalnya sy main css pk bootstrap twitter dan di dalamnya ada LESS, bingung buat ngapain :D

    Reply
    • Charlie

      Ya benar :D
      LESS css mempercepat penulisan dan mempermudah pengubahan. Jadi misalkan kita mau mengubah warna merah pada Twitter Bootstrap, kita tidak usah susah susah menggunakan find and replace lagi. Cukup ubah variable warna @red dari #9d261d ke warna yang lain.

      Reply
      • uchin@kitabuljami

        beberapa hari ini saya sudah mencobanya tapi masih belum dong…
        maklum biasanya css-nya cara primitif/ketik manual hehe
        mirip dengan OOP ya…

        klo bisa mohon diberikan contoh yang lebih kompleks, template sederhana misalnya.. thanks

        Reply
  3. mbahsomo

    Kemaren awalnya saya berfikir apakah ini tidak bekerja 2 kali, karena harus di render lagi oleh javascript.
    Tapi untuk css yang dinamis ini akan sangat membantu.
    Jadi terimakasih info dan Ilmunya….

    Reply
  4. Dwiiswanto

    mantab penjelasanya jadi lumayan ngerti bagaimna Less itu bekerja dan kegunaannya dalam pengcodingan Css. . .
    di tunggu artikel selanjutnya. ..

    Reply
  5. Anhari

    makasih penjelasannya mas, saya baru pertama kali pelajarin less.
    Soalnya saya baru pindah kantor, trus di kantor baru saya pake less

    Reply

Leave a Reply