Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Bikin Css Lebih Ganteng dengan Less

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 :)

Tanggapan

  • 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 ..
  • jadi Less itu css dgn variabel y? baru tau ane
  • mantab gan :) sedikit tapi sangat berguna, terima kasih
Sign In or Register to comment.