Bikin Css Lebih Ganteng dengan Less

naufal

Oke kawan kita akan belajar cara ngegantengin Css dengan LESS, pernah dengar ?

Less adalah script css yang di modifikasikan dan membuat css itu lebih terstruktur, saya akan memberikan sedikit tips nih buat para web design yang kayaknya bete banget kalo nulis css sampe panjang banget kaya kereta api..

Oke masuk ke langah pertama, sudah pasti referensinya dari sini nih => Less Css.

Ini Contoh kodingan dengan menggunakan less :

@pixel: 1px ; @half-pixel: 5px ; @ten-pixel: 10px ; @color: #FFFFFF ;   #header{ color: @color ; border-radius: @half-px ; border: @pixel solid black ; }

ini contoh kodingan dengan css :

#header{ color:#FFFFF; border-radius:5px; border:1px solid black; }

gimana mantap kan ? dengan less kita bisa menampung di variable yang kita bikan dengan pendeklarasian @, atau di php sama seperti $, nah itu hanya tutorial yang pertama,dan sekarang tutorial yang ke 2: yaitu dengan menggunakan nested kita bisa membuat script css lebih bermakna.

@half-pixel: 5px ; @ten-pixel: 10px ; @color: #FFFFFF ;   #header { color: @color ; border-radius: @half-px ; border: @pixel solid black ;   .box { border-radius:@ten-px; } a { text-decoration:none; color: @color ; } &:hover { tex-decoration:none; color:red; } }

Nah ini sama saja dengan script di css seperti ini

#header{ color:#FFFFF; border-radius:5px; border:1px solid black; }   #heade .box { border-radius:10px; }   #heder a { text-decoration:none; color: #FFFFF ; } #heaader a:hover { text-decoration:none; color: red ; }

Oke itu sekalian tutorialnya semoga dapat berguna dan bermanfaat

badroen

mirip mirip bootstrap tapi ini bikin coding cssnya sendiri ya mas bro ?? jadi gak tinggal nyomot kayak bootstrap kah ???

btw boleh gak kalo minta diajarin menggambar layout pake css bagaimana ?? denger2 sekarang css3 udah bisa menggambar layout web ..

miamiayam

jadi Less itu css dgn variabel y? baru tau ane

helmi_tnc

mantab gan sedikit tapi sangat berguna, terima kasih