Sekilas LESSCSS

krist

APA LESSCSS?
Sebagai seorang designer, pasti akrab dengan CSS, stylesheet yang digunakan untuk melakukan format markup pada halaman web. CSS itu sendiri sangat sederhana, terdiri dari set aturan dan deklarasi blok. 

CSS sangat mudah digunakan tetapi juga menimbulkan keterbatasan pada apa yang dapat anda lakukan dengan itu. Keterbatasan ini, seperti ketidakmampuan untuk mengatur variabel atau untuk melakukan operasi, berarti bahwa kita pasti akan berakhir untuk mengulangi potongan yang sama di tempat yang berbeda. Tidak baik untuk mengikuti kasus ini.

Lesscss adalah bahasa stylesheet yang dinamis yang memungkinkan designer lebih sedikit menulis code dibandingkan dengan bahasa CSS biasa. Lesscss juga mendukung beberapa fungsi yang dapat digunakan dan memudahkan pekerjaan designer agar tidak melakukan pengulangan yang dapat memperpanjang waktu pekerjaan.

SIAPA LESSCSS?

Lesscss di develop oleh Alexis Sellier dan anda dapat menemukan Lesscss sendiri disini. 

Jika anda adalah seorang designer yang menginginkan bahasa stylesheet yang dinamis dan juga dapat mempersingkat waktu pekerjaan anda, Lesscss adalah solusinya

KAPAN LESSCSS?

Lesscss dibuat pada tahun 2009-2010, tetapi versi-versi sebelumnya masih mempunyai banyak sekali bug. Hingga saat ini, Lesscss dengan versi 1.3.0 sudah melakukan fix bug dan dapat berjalan baik.

Di Github, Lesscss sudah di fork 621 dan watcher sebanyak 6.438 user

Waktu yang paling tepat untuk menggunakan bahasa ini adalah detik ini juga. Karena Lesscss sangat mempermudah kinerja designer untuk lebih mempersempit pengulangan script dan lebih dinamis dengan adanya mixins dan fungsi-fungsi yang ada. 

Menghemat waktu pekerjaan adalah yang terbaik bukan?

DIMANA LESSCSS?

Anda dapat menemukan Lesscss di :

• Lesscss Official Website
• Github

Artikel terkait tentang Lesscss disini

BAGAIMANA LESSCSS?

Tutorial tentang Lesscss akan ada di Diskusiweb, jadi jangan kemana-mana, tetap di DISKUSIWEB! Forum kesayangan anda #iklan )

krist

INSTALASI LESSCSS DAN UJI

Download Lesscss disini 

Buat struktur folder seperti ini dan buat file index.php

Simpan hasil download tadi di folder assets > js

Kita akan tes Less, buat satu file di folder assets > less lalu beri nama test.less

Perlu diingat, untuk penamaan file Lesscss menggunakan ekstensi .less 

Buka file index.php, lalu sesuaikan dengan gambar ini

Perlu diingat, load test.less terlebih dahulu sebelum less.js

Gunakan rel="stylesheet/less" pada saat load file less

Hasilnya akan seperti gambar dibawah ini

saefulloh

boleh tanya disini ga ? )

krist

Apa?

saefulloh

Less... itu support sama browser apa aja ?

atau sebenernya sama kaya CSS cuma beda bahasa..

atau pengembangannya CSS.. atau gimana ?

krist

LESS itu sama seperti CSS. Cuma bedanya, LESS ada variable, mixins, nested, function, etc sehingga memudahkan pekerjaan..

LESS bukan CSS. LESS hanya membantu fokus pada pengerjaan CSS

Javascript --> LESS --> render menjadi CSS

contoh fitur :

.ini_mixins(@warna = #ddd)

{

   background-color:@warna;

}

.class_untuk_heading

{

   .ini_mixins(#ccc); <-- Mixins dan ubah warna default menjadi #ccc

}

saefulloh

teru ga butuh file tambahan/pendukung (misal kaya jquery/framework) ?

yang render tu siapa mas ?

jadipertanyaan lagi.. bener tuh less lebih bagus kalau ka gitu...

tapi kenapa sepertinya lebih terkenal CSS dan lebih banyak pake CSS.. ?

hehe..

krist

Ga butuh jQuery.. Yang render ya LESS (less.js) itu

Kan diatas udah aku jawab, LESS bukan CSS. LESS hanya membantu fokus pada pengerjaan CSS

Jadi LESS itu memudahkan pekerjaan aja, yang nantinya hasil akhir dari pembuatan LESS akan menjadi CSS

Jangan salah pengertian loh..

LESS !== CSS

Ibaratnya kalau PHP - HTML gini

echo "<p>Hallo</p>" <-- PHP

Hasilnya nanti menjadi HTML <p>Hallo</p>

saefulloh

oh.. paham paham,,,, 

terima kasih deg.. berarti ya bener butuh file tambahan "less.js".

ok aku paham.. ntar tak coba deh.. 

\:D/

like dah.. 

404_fot_found

q dapet error kek gini

XMLHttpRequest cannot load file:///D:/rahasia/HTML/css/style.less. Cross origin requests are only supported for HTTP.

padahal q uda terapin semua caranya,
o ya q pake html5 ngaruh ga ya?

404_fot_found

wah......
udah resolve, ternyata less bekerja di server.
q coba di localhost baru mau

krist

Oktama

Biasakan pake local server mas klo masah desain dan develop

Riikn

Biasakan pake local server mas klo masah desain dan develop

setuju!