รู้จักกับ LESS ใน CSS
ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

 

LESS CSS  เป็นเทคนิคการเขียน CSS ที่เรียกว่า CSS Preprocessors ซึ่งหมายถึงต้องมีการ Process ก่อนถึงจะใช้งานได้ LESS CSS จะใช้เทคนิคในภาษา Programming เข้ามาร่วมในการเขียน CSS ซึ่งจะทำให้โค้ดที่เราเขียนเป็นระเบียบ และนำมาใช้ใหม่ได้ง่ายขึ้น

ตัวอย่างการใช้ LESS CSS

@maincolor: #7d2717;
#header { color: @maincolor; }
h2 { color: @maincolor; }

     จากโค้ดตัวอย่างแสดงให้เห็นว่า เราสามารถกำหนดตัวแปรให้ทำการรับค่า #7d2717 เพื่อสะดวกในการเรียกใช้ และแก้ไขแค่ที่เดียวคือที่ตัวแปรที่เรากำหนดไว้ ในตำแหน่งอื่นที่ทำการเรียกใช้ตัวแปรนี้ก็จะเปลี่ยนแปลงไปตามที่เราแก้ไข

วิธีการใช้งาน LESS

     ที่ LESS เรียกว่า CSS Preprocessors ก็เพราะว่าต้องมีการ Convert หรือ Compile ไฟล์ก่อนนำไปใช้ เทคนิคในการ Convert ไฟล์อาจจะใช้ JavaScript เข้ามาช่วยในการ Convert แบบอัตโนมัติก็ได้
     1. การ Compile LESS CSS ด้วย LESS.js วิธีนี้เป็นการ Compile แบบอัตโนมัติ คือ เรียกใช้ไฟล์ .less บนหน้าเว็บเลย เสร็จแล้วเรียกใช้ Javascript ที่ชื่อ Less.js เพื่อ Compile ไฟล์ .less ที่เราเรียกก่อนหน้านั้น
     2. การใช้โปรแกรม Compile LESS CSS ด้วย SimpLESS วิธีนี้จะเป็นการนำไฟล์ .less ที่เราเขียนไว้แล้วไปใส่ในโปรแกรม SimpLESS เพื่อแปลงเป็นไฟล์ CSS ซึ่งโปรแกรมนี้ฟรี และใช้ได้ทั้งบน Windows, Mac, Linux

สามารถอ่านบทความที่เกี่ยวข้องเพิ่มเติมได้ ที่  ทำความรู้จักกับ CSS


พัฒนาโปรแกรมบนเว็บ PHP บริการพัฒนา Joomla Extension พัฒนาและปรับแต่งเว็บบอร์ด phpBB