Belajar Less : Pengenalan part 2 - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Belajar Less : Pengenalan part 2, 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 part 2
link : Belajar Less : Pengenalan part 2

Baca juga


Belajar Less : Pengenalan part 2

Ini merupakan lanjutan dari artikel sebelumnya mengenai LESS. Mari kita lanjutkan Belajar Less : Pengenalan ini di part 2.

Skenario HTML


Jika compiler side-client sudah tersedia pada tag <head>, mari kita lanjutkan untuk mempersiapkan elemen objek HTML, seperti dibawah ini: 

<div id="WadahObjek">
      <div class="objek" id="objekSatu"></div>
        <div class="objek" id="objekDua"></div>
 <div class="objek" id="objekTiga"></div>
</div>

Skenario LESS


Setelah dokumen HTML dibuat seperti diatas, sekarang bukalah text editor anda dan buatlah file style.less. Kemudian berikan sentuhan style untuk objek yang telah dibuat pada HTML. Kita tuliskan CSS Standar dulu seperti dibawah ini:

body {
      background:#262626;
}
#WadahObjek {
      margin:0 auto;
      width:650px;
}
.objek {

      display:inline-block;
      width:150px;
      height:150px;

      background:#191919;

      margin:25px;
}

Browser akan menampilkan objek dengan bentuk kurang lebih seperti dibawah ini:


Coba bayangkan, jika kita suka dengan warna #191919 untuk digunakan pada beberapa tempat yang tersebar disepanjang stylesheet dengan jumlah baris hampir 1000? Melelahkan sekali bukan? Lalu, setelah semua baris itu beres ditulis secara manual, tiba-tiba kita ingin mengubah warna tersebut dengan warna lain atau mengganti warna dengan sebuah perpaduan warna. Pasti sangat melelahkan!

Variable

Variabel memungkinkan anda untuk menentukan suatu nilai yang dituliskan dalam satu tempat, dan kemudian menggunakannya disepanjang stylesheet, membuat perubahan global semudah mengubah satu baris kode.

Perhatikan kode LESS dibawah ini:

@WarnaDasar: #262626;
@WarnaSatu: #191919;
@TinggiLebar: 150px;

body {

    background: @WarnaDasar;
}
#WadahObjek {
    margin: 0 auto;
    width: 650px;
}
.objek {
    display: inline-block;
    width: @TinggiLebar;
    height: @TinggiLebar;

    background: @WarnaSatu;

    margin: 25px;
}

Perhatikan bahwa kita hanya perlu sekali menuliskan variable @WarnaDasar dengan nilai #262626. Ketika kita ingin melakukan perubahan warna maka hanya cukup merubah nilai pada variable @WarnaDasar saja. Lebih mudah dan cepat bukan?

Variabel LESS biasa dideklarasikan dengan simbol "@". Kita bisa memberikan nama variabel sesuai dengan keinginan kita dan atau dengan alasan kemudahan untuk mengingat, kemudian kita berikan nilainya. Setelah itu kita dapat merujuk nama variabel yang telah dibuat untuk ditempatkan dimana saja.

Ketika kita compile menggunakan Aplikasi GUI Compiler LESS (misal; Crunch) maka akan dihasilkan kode CSS standar seperti dibawah ini:

body{
      background:#262626;
}
#WadahObjek{

     margin:0 auto;

      width:650px;

}

.objek{

        display:inline-block;

       width:150px;

        height:150px;

       background:#191919;

 margin:25px;

}

Mixin


Mixin memungkinkan kita untuk menanamkan sifat-sifat kelas ke dalam kelas lain dengan hanya memasukan salah satu nama kelas. Hampir sama seperti halnya variabel, tetapi keseluruhan sifat kelas akan mempengaruhi kelas lainnya. Mixin juga dapat berperilaku seperti fungsi, dan mengambil argumen. Masih bingung? Lanjut...!

Kita tahu bagaimana cara membuat lingkaran untuk objekSatu? Cukup dengan mengeset radius border sebesar-besarnya seperti contoh dibawah ini:

#objekSatu{

 border-radius:9999px;

}

Maka browser akan menampilkan objek dengan bentuk kurang lebih seperti dibawah ini:


Namun harus diingat sejak penggunaan CSS3, jika ingin objek tersebut dapat ditampilkan sempurna pada semua browser maka kita harus menambahkan vendor prefix -webkit- dan -moz- sebagai cara terbaik. Maka kurang lebih kita bisa menuliskannya seperti dibawah ini:

#objekSatu{

 -webkit-border-radius:9999px;

          -moz-border-radius:9999px;

               border-radius:9999px;

}

Hmmm... Bagaimana jika ada objek lingkaran lain yang jumlahnya banyak dan harus diberi sifat serta vendor prefix sama seperti itu? Misal 20 objek lingkaran... Huh!!! Sangat melelahkan...

Tenang... LESS membuat pendefinisian mixin menjadi lebih sederhana dan mudah. Pendefinisian mixin pada LESS sebenarnya hampir sama dengan bahasa pemrograman lainnya. Penulisan mixin LESS hampir sama dengan CSS standar terutama dalam penggunaan grup CSS. Hampir sama dengan penulisan variabel, hanya saja kita menggunakan simbol "." (titik) untuk mendeklarasikan mixin, seperti contoh dibawah ini:

@bulatan: 9999px;



.SudutBulat {

    -webkit-border-radius: @bulatan;

       -moz-border-radius: @bulatan;

            border-radius: @bulatan;

}



#objekSatu {

     .SudutBulat;

}

Dan sekarang, kita hanya cukup memasangkan .SudutBulat pada semua objek yang akan dibuat lingkaran tanpa perlu menambahkan sifat-sifatnya (border-radius dan vendor prefix) lagi. Jika suatu hari kita ingin mengubah nilai bulatan, cukup ganti nilai pada variabel @bulatan maka semua objek yang memiliki sifat sama akan ikut berubah tanpa harus diubah satu persatu.

Parametric Mixin


Penambahan parametric mixin membuat penulisan sifat-sifat kelas menjadi lebih fleksibel. Parametric mixin merupakan cara penyisipan dan atau penambahan sifat baru dari sifat mixin yang telah ada tanpa mempengaruhi mixin asal. Bingung lagi ya???

Ayo kita lanjutkan lagi... objekSatu telah diberi sifat lingkaran, dan kita ingin membuat sudut rounded dengan radius baru pada objekDua, namun dengan tetap memanfaatkan sifat-sifat yang sudah tersedia pada mixin objekSatu, sehingga kita tidak perlu membuat mixin baru. Bagaimanakah caranya? Perhatikan deklarasi parameter dibawah ini:

@bulatan: 9999px;



.SudutBulat (@radius: @bulatan){

    -webkit-border-radius: @radius;

       -moz-border-radius: @radius;

            border-radius: @radius;

}

Pendeklarasian parametrik mixin yaitu dengan menambahkan tanda kurung "( )" setelah nama mixin. Didalam tanda kurung tersebut kemudian ditambahkan variabel. Variabel pada contoh diatas menggunakan nama variabel @radius yang memiliki nilai sama dengan variabel @bulatan yaitu 9999px. Kemudian nilai-nilai pada mixin diubah dengan variabel @radius, ini berarti nilai default dari variabel @radius adalah 9999px, namun ini bersifat default yang bisa saja nilai variabel @radius tersebut diganti sesuai kebutuhan. Tambah bingung ya? Perhatikan penggunaan mixin dibawah ini:

#objekSatu {

    .SudutBulat;

}



#objekDua {

    .SudutBulat(30px);

}

Perhatikan dengan seksama, bahwa objekSatu menggunakan variabel @radius dengan nilai default yaitu 9999px. Hal ini karena nilainya tidak diubah. Sedangkan pada objekDua nilai untuk variabel @radius diubah menjadi 30px. Sehingga nilai default untuk variabel @radius akan diubah menjadi 30px dan diberlakukan hanya untuk objekDua. Sehingga objekDua jika ditampilkan pada browser akan tampak seperti dibawah ini:



Operasi


Salah satu fitur hebat LESS lainnya adalah kemampuan untuk menggunakan operasi matematika didalam stylesheet. Mungkin kedengarannya sangat membosankan jika sudah berhubungan dengan matematika, namun hal ini sangatlah bagus untuk LESS. Operasi memberikan keleluasaan menambah, mengurangi, membagi dan mengalikan nilai properti dan warna, memberikan Anda kekuatan untuk menciptakan hubungan yang kompleks antar sifat. Bagaimana operasi matematika digunakan pada LESS?

Pada contoh terdapat 3 objek yang sudah kita berikan gaya tertentu, namun belum ditambahkan garis bingkai (border) dan warna garis bingkai (border color) pada objek tersebut. Misal;


  • Kita ingin menentukan tebal garis bingkai sebesar 5% dari tinggi atau lebar objek,

  • Kita ingin menentukan warna garis bingkai

Maka kita tuliskan operasi matematiknya kedalam stylesheet, seperti dibawah ini:

@TebalGaris: @GarisTepi * 0.05;

Kemudian warna garis diambil dari perkalian variabel @WarnaTiga dengan 3, seperti dibawah ini:

@WarnaTiga: #111;

@WarnaGaris: @WarnaTiga * 3;

atau

@WarnaGaris: @WarnaTiga * #222;

Awalnya memang cukup membingungkan, namun saya yakin anda akan memahami setelah melakukan beberapa kali uji coba. Harus diingat bahwa; menambahkan atau mengurangi dengan #000 tidak akan memberikan efek, dan penggunaan #fff merupakan efek masimal.

Setelah kita menentukan variabel untuk garis bingkai maka kita bisa menerapkannya pada garis bingkai seperti dibawah ini:

border: @TebalGaris solid @WarnaGaris;

Sehingga objek akan menjadi seperti gambar dibawah ini:


Mudah bukan? Khusus untuk warna, kita bisa menggunakan fungsi saturasi yang lumayan cukup rumit dan kompleks.

Mungkin Itu adalah materi tentang Pengenalan LESS Part 2, selanjutnya akan dilanjutkan ke LESS part 3, don't miss it. Terima Kasih.



Demikianlah Artikel Belajar Less : Pengenalan part 2

Sekianlah artikel Belajar Less : Pengenalan part 2 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Belajar Less : Pengenalan part 2 dengan alamat link https://dev-create.blogspot.com/2019/12/belajar-less-pengenalan-part-2.html