Pengenalan Less CSS

 Author : ramadhan, 07 May, 2014, Komentar

pengenalan less


PERINGATAN, kalau anda ini orang yang suka copy paste style css anda, menuliskan hal yang sama berulang ulang, tidak menggunakan ulang kode anda. HALAMAN INI bukan tempat yang tepat bagi anda! Serius, kalau anda udah selesai baca tutorial ini, anda akan jadi seorang web desainer yang lebih produktif dari yang diatas tadi. Dan mungkin lagi... Setelah anda membaca tutorial ini, reaksi anda akan jadi seperti ini ketika liat pure css :p



:/


Saya sudah peringatkan ya! awas kalo ntar selesai baca malah salahin saya :p


Apa itu less css?

Pernah membayangkan kira-kira kalau css ada variabel juga.. Jadi nggak bingung gitu kalau ingin mengubah warna pada suatu selektor tanpa menghafalkan hex warna satu persatu.


Nah sebelum kenalan sama LESS, sebelumnya anda harus tahu apa itu HTML dan apa itu CSS. Dan sedikit Javascript ya..

Jangan takut nggak mudeng kalau disini, udah saya lengkapin selengkap lengkapnya lengkap kok.. materi pendukung:


  • Video tutorial (Youtube) salah satu contohnya ada diatas.

Ada 2 kemungkinan jawaban ketika klien bilang "Kira kira kalau websitenya ini backgroundnya biru pasti bagus ya.. daripada merah gitu, nggak enak liatnya..."


Kemungkinan:

  1. Jawaban pure css Developer : "Huft! Tunggu 15 menit lagi"
  2. Jawaban Less css Developer : "Siap.. 30 detik ya... Selesai.. silakan diliat :)"

Nah itu skenarionya..

Langsung kasih contoh sehari hari aja ya.. Contoh saya seorang web desainer, sehabis riset perpaduan warna yang tepat, ada beberapa kandidat perpaduan warna. Tapi kalau di css, saya minimal harus menghafalkan perpaduan warna tersebut dong? Kalo kandidat perpaduannya ada 5 dan tiap kandidat setidaknya ada 5 warna berbeda.. Padahal bukan warna aja yang saya pikirkan, perpaduan ukuran tiap elemen juga itu masih ukuran, ada lagi perpaduan kompatibilitas browser..


Dan pasti banyak lagi. Mau nggak menghitung semua kandidat ada berapa? Itu baru menghitung.. Belum mempertimbangkan mana nih perpaduan yang bagus.. Wkwkwkwkw pasti pusing tuh. Andai ada variabe, Nah jangan kawatir.. Jadi profesional itu nggak sulit kok, tinggal pelajari standar yang telah ada. 


Standar profesionalitas. 

Standar apa aja kalau di desain web? Ini ada standar baru, namanya LESS CSS. Bisa dibilang bahasa pemrograman baru. Dia ini bahasa turunan dari CSS. Dengan LESS, web desain akan lebih menyenangkan. Yang terbayang diatas tadi.. Sekarang terwujud !!! LESS CSS, framework css yang bisa membuat para web desainer kehilangan penyakit pusing hariannya (lebay++). LESS CSS, memudahkan para developer dalam memposisikan CSS nya, mengatur CSS lebih mudah dengan LESS. Ada variabel, ada fungsi, ada turunan, ada mixins, semua hadir hanya untuk Anda, khususnya Web Desainer yang ingin hasil kerjanya tampil profesional tanpa mengidap pusing soal mempertimbangkan kandidat desain yang diatas tadi. Emang apa sih kelebihan si Less CSS kok kedengarannya lebay banget Sob, dia tuh.


  • CSS kita jadi lebih bersih kalau udah dicompile
  • Mempercepat kita dalam memanage style, nggak banyak bingungnya.
  • Banyak fitur baru yang sangat berguna yang nggak ada dicss.
  • Banyak Frontend Framework yang pakai Less seperti Bootstrap dan Uikit.

  • Memudahkan developer lain waktu ngoprek desain kita. Enak banget nih kalau dipakai teamwork.

Waduh.. Jadi pengen tau lebih nih, Tuh kan.. Namanya aja calon developer profesional, pasti ingin tau lebih.. Wkwkwkwk.. Kenalin sob.. Less CSS, cantik, langsing, ngertiin banget.. KOK BISA ? Iya sob, ntar kalo udah bisa pakai Less CSS, berani jamin deh nggak akan nulis css lagi tanpa Less (pengalaman pribadi).


Tapi ada syaratnya kalo sama Less, harus jalin hubungan serius, jangan dibuat main-main ntar pusing sendiri lho, dan satu lagi, Less ini spesial banget, cara memperlakukannya pun juga spesial, kalo cara memperlakukannya salah ntar ngambeg dia (error :D). Gini nih sob cara memperlakukannya ada yang dicompile jadi css di client side, ada juga yang langsung dicompile jadi css. 


Gimana tuh ngompile di clientnya? Pakai Less.js, ada di lesscss.org. Caranya, sisipkan dulu file lessnya di header, baru sisipkan Lessjs sebagai compilernya. Ingat selalu dahulukan less sebelum compilernya. Cara nyisipinnya juga khusus sob. Masukin lewat sini nih <> Performa? + Enak buat development nggak ngompal ngompile. - Nggak enaknya, kalo file lessnya gede. Bakal Crash tuh si browser. Trus gimana dong biar nggak sering crash browsernya? Pakai compiler langsung aja. File Less, ntar dicompile pakai software Compiler Less otomatis ntar outputnya jadi file css. Nah css itu hasil less tadi.


Langsung bisa dipakai di browser, nyisipinnya juga seperti nyisipin stylesheet css pada umumnya. Trus dapetnya Software Compiler Less darimana? Banyak kok sob, rekomendasi sih pakai Koala (windows user), enak banget, ada auto compilenya. Jadi kalo file less tersebut telah dimodifikasi, secara otomatis Koala mengompile Less tersebut dan ditaruh di output path.


Nah tertarik nggak nih?

Tertarik?

Ah yang beneeer... :D

Step by step ya.. hehehe

NB: nggak usah pusing buatin project baru buat mempelajari less.. kan diatas tadi udah saya kasih link download demo less kan.


Variabel

Variabel dalam less bisa di deklarasikan dengan simbol @, setelah itu beri nama deh. seperti @Variabelku, Contoh : 


@turquoise:  #1abc9c;
@green-sea:#16a085;
.demo-headline {
  color: @green-sea;
  margin-bottom: 50px;
  margin-top: 2px;
  padding: 40px 0;
  text-align: center;
  word-wrap: break-word;
}


Tapi masih kelihatan nggak enak kalo kita masih gantiin nilai variabelnya, kurang enak ntar kalo didevelopmentnya.. nah gini triknya biar enakan 


@turquoise: #1abc9c;
@green-sea: #16a085;
@brand-primary: @green-sea;
.demo-headline {
  color: @brand-primary;
  margin-bottom: 50px;
  margin-top: 2px;
  padding: 40px 0;
  text-align: center;
  word-wrap: break-word;
}


Nah kalo gini kan enakan. kalo mau ganti ntar tinggal cari deklarasi brand-primari, nah nilai brand primarynya milih variabel dari kumpulan palet warna kita.

Tapi ingat ya.. variabel di less bersifat konstan. Ketika variabel udah di set, kita nggak bisa nge set ulang di file tsb. jadi 


@turquoise:#1abc9c;
@green-sea:#16a085;
@brand-primary: @turquoise;
@brand-primary: @green-sea;


Yang diatas ini masih salah ya... nggak boleh dideklarasi ulang.


Mixins

Tahu caranya membuat lingkaran dengan css3? Hanya dengan memberi bor-der-radius yang tinggi bukan... Liat nih


Lingkaran CSS


Karena kita menggunakan css3, pasti ingin semua browser bisa baca lingkaran kita bukan.. jadi karus kasih prefix -webkit- dan -moz-. jadi ntar harus gini nih kalo pure css


#lingkaran {
    -webkit-border-radius:9999px;
       -moz-border-radius:9999px;
            border-radius:9999px;
}
.rounded-corner{
    -webkit-border-radius:9999px;
       -moz-border-radius:9999px;
            border-radius:9999px;  
}
#lingkaran {
    .rounded-corner;
}


Liat tuh, ada 3 properti dengan nilai yang sama... bikin boring tau nggak kalo harus nulis segitu banyak terus tiap mau bikin lingkaran. Tenang saja... Less datang...! tet tenet teneeeeet.


Dengan less kita bisa mendefinisikan "mixins", sesuatu yang bisa dianggap sebagai fungsi kalau di bahasa pemrograman lain. Di dalam Less, mixins digunakan untuk melakukan beberapa instruksi css. Mengulang suatu rup instruksi yang buat kita boring tadi. Jadi kita gunain aja nih mixin buat jaga jaga nanti kalau ada elemen lain yang mau dijadiin lingkaran 


Nah sekarang kalau mau buat lingkaran lagi nggak perlu nulis 3 instruksi diatas tadi. cukup panggil aja nama mixinsnya. disini .rounded-corner yang kita panggil dimana .rounded-corner itu suatu mixins buat membangun lingkaran.

Dan lagi.. pasti lebih enak kalo kita bisa setting parameternya juga.. jadi nggak melulu 9999px border-radiusnya, bisa sesuai selera saat manggil. yaa seperti fungsi bahasa pemrograman lain, ada parameternya. Nah jangan kawatir... Less pengertian banget kok :D


Parametric Mixins

Sekarang saya pengen buat rounded corner, bukan hanya lingkaran doang. Harus dinamis tuh value di mixinsnya. Dan tentunya terserah saya.. 


Pakai APA????

Ya tetep mixins, tapi kali ini kita bisa tambahin parameter seperti yang ada di fungsi fungsi bahasa pemrograman lainnya.


@radius-default:30px;
.rounded-corner(@radius:@radius-default){
    -webkit-border-radius:@radius;
       -moz-border-radius:@radius;
            border-radius:@radius;  
}


Nah kan.. seperti bahasa pemrograman lain.. ada parameternya juga, ada default parameternya juga, jaga jaga kalo ntar kita males ngisi defaultnya :3


Cara gunainnya???


Liat nih..



@radius-default:30px;
.rounded-corner(@radius:@radius-default){
    -webkit-border-radius:@radius;
       -moz-border-radius:@radius;
            border-radius:@radius;  
}
.lingkaran{
    .rounded-corner(9999px);
}
.rounded-square{
.rounded-corner(5px)
}
.rounded-square2{
.rounded-corner(10px)
}


Praktekin aja tuh di file demo download tadi... oprek terserah anda deh, kayak yang ada di video. Nah ntar kalo gagal langsung tampung sini, di komentar... Namanya aja belajar, gagal itu hal biasa :D


Anda tidak akan mendapat apa apa sebelum anda langsung turun ke kode


Operations


Satu lagi nih dari less, kita bisa melakukan operasi matematika dalam style kita.


Contoh nih, saya pengen buat elemen dengan border yang ukurannya 10% dari width elemen tersebut.  




Ahihihihihihi... dia pasti pure css developer. 


Dan Less bilang "Itu bagian gua..."

Liat nih


@peter-river: #3498db;
@widthku: 100px;
@warna-tema: @peter-river;
@ukuran-border: @witdhku * 0.1;
@warna-border: @warna-tema - #333;
.elemenGua {
	border: @ukuran-border solid @warna-border;
}


Done !!!

less

Loh kok warna bisa di kurangin juga???

Nah yang ini baru nih sob.. saya aja baru nyoba :D yang dicontoh itu kita lagi mempergelap warna. Mengurangi sebanyak 3 hexadesimal unit ditiap nilai RGBnya. Agak puyeng ya.. ama sob :D intinya kalo dikurangi pakai #000 ntar nggak ada efek, kalo dikurangi #fff ntar kena efek maksimalnya.. Udah cobain ajah.. langsung ke kode aja ngopreknya :)


NB: ingat ya, ntar semua ini dicompile dan hasil akhirnya tetep pure css, nilainya tetep dalam unit. Jadi nggak akan bisa berubah on the fly misal kalo kita ngeresize window browsernya.



Color Functions


Makin keren deh kalo pakai Less, ada fungsi buat warna juga.. jadi nggak perlu se rumit yang diatas ngerubah warnanya.. pakai mereka nih:


darken() dan lighten() buat mempergelap dan mempercerah warna.

saturate() dan desaturate() untuk membuat warna lebih "colorful" dan membuatnya lebih ke grayscale.

fadein() dan fadeout() untuk mempertinggi dan memperendah transparasi warna.

spin() untuk modifikasi hue dari warna.


Cara pakainya?


@peter-river: #3498db;
@warna-tema: @peter-river;
.elemen {
  background-color: darken(@warna-tema, 20%);
}


Nah itu kita lagi mempergelap warna jadi 20% lebih gelap sob. Udah langsung aja praktekin semua :D daripada penasaran loh...


Nested Rules


Ginih sob.. tau chain selector di css kan.. seperti ini..


#header h3 {
	font-size: 16px;
}
#artikel h3 {
	font-size: 14px;
}


Nah jelas beda kan ntar antara h3 di #header dan h3 di #artikel. Itu baru dua tingkat nih sob.. style buat h3 yang ada di #header. kalau mau ngedesain span yang ada di li yang ada di ul yang ada di .dropdown yang ada di header. sama ngedesain span yang ada di li yang ada di ul yang ada di .social yang ada di header. Padahal keduanya harus beda. Masak mau gini 


header .dropdown ul li span {
	font-size: 14px;
}
 
header .social ul li span {
	font-size: 10px;
}


nah kalo pengen ada style berbeda lagi di li masing masing, masak mau buat yang sepanjang itu lagi... kalo ntar ada tester atau siapa gitu yang pengen desainnya diganti dikit di bagian span atau li nya.. bakal ribet kan cari satu persatu gitu :/


Nah karna kita udah kenal sama yang manis ini. Si Less.. kita minta bantuan dia aja... nggak ribet.. saya bisa bilang nggak ribet soalnya saya sendiri udah pernah dipuasin sama si Less dan emang muasin banget dia :D


header {
	.dropdown {
		ul {
			li {
				span {
					font-size: 16px;
				}
			}
		}
	}
	.social {
		ul {
			li {
				span {
					font-size: 10px;
				}
			}
		}
	}
}



Nah itu kalau di Less.. lebih readable bukan..


Kalo mau ngubah style li nya gimana???


See this..


header {
	.dropdown {
		ul {
			li {
				background: blue;
				span {
					font-size: 16px;
				}
			}
		}
	}
	.social {
		ul {
			li {
				background: red;
				span {
					font-size: 10px;
				}
			}
		}
	}
}


Enak kan :D


Nah kalo saya mau yang ul.dropdown-inverse beda sama ul.dropdown-black gimana? pakai tanda & sob.. liat aja nih 


header {
	.dropdown {
		ul {
			&.dropdown-inverse{
				color: white;
			}
			&.dropdown-black{
				color: black;
			}
			li {
				background: blue;
				span {
					font-size: 16px;
				}
			}
		}
	}
	.social {
		ul {
			li {
				background: red;
				span {
					font-size: 10px;
				}
			}
		}
	}
}


Nah buat :hover juga sama.. tinggal nambahin &:hover ... jadi kalo mau nambahin apa apa gitu jadi lebih enak :D


Importing


Nah ini yang buat Anda lebih nyaman... kan kita punya banyak modul misal nih.. ada dropdown.less, ada mixins.less, ada variable.less dll..  caranya biar jadi satu? 


Ya disatukan lah :D hehehe pakai IMPORT..


Coba buka file demo trus cari folder less dan cari file flat-ui.less, itu file core nya.. Semua modul disatukan disitu, tapi hard dependency, kebutuhan utama harus didahulukan seperti variable dan mixins baru modul, baru style kita sendiri. Untuk import mudah kok cukup seperti ini


@import "namafile.less";


Dan bahkan bisa nggak ngikutin ekstensinya: 


@import "namafile";


Mudah kan... hehehe...


Nah ini saran ya.. runtutannya import seharusnya seperti ini:


  • CSS Reset/Normalize
  • Variabel
  • Font dan tipografi
  • Style utama anda
  • ... dan kebutuhan sekunder lain seperti cssnya jquery plugin atau terserah apa gituh ..


Sampai disini udah paham ya.. kalau udah paham anggukkan kepala anda :D


Nah kalo belum paham silakan gelengkan kepala anda dan tulis yang mana yang belum paham di komentar :D see you later on next tutorial :)


 
Bagikan halaman ke sosial media
 
Tags :   less    css       

Tentang Penulis

writer ramadhan
Web designer, love music, football, photography

Link: http://exmple.com

   Komentar Anda