LESS คืออะไร ใครยังเขียน CSS อยู่ต้องอัพเดตด่วน
LESS คืออะไร มาแล้วรูปแบบการเขียน CSS แบบใหม่ ที่จะทำให้ชีวิต Frontend ง่ายขึ้นเยอะ หรือคนทำเว็บไซด์อย่างเราๆ ท่านๆนี่เอง
LESS เป็นรูปแบบการเขียนโปรแกรมแบบหนึ่ง มีรูปแบบการเขียนคล้ายกับ CSS เลยทีเดียว แต่จะมีการประกาศตัวแปร มีฟังก์ชั่น มีการ บวก ลบ คูณ หาร มีการนำกลับมาใช้ใหม่ (reuse) ได้เหมือนเขียน OOP เลย เรียกการเขียนโปรแกรมแบบ LESS อีกอย่างหนึ่งว่า CSS pre-processor
เรามาดูปัญหาในการเขียน CSS ก่อนว่าทำไม เราจะต้องเปลี่ยนไปเขียน LESS ด้วย เพราะถ้าไม่มีเหตุผลพอ คนที่เขียน CSS อยู่แล้วก็คงมีข้อกังขาว่า ทำไมต้อง LESS
* เคยเจอไหม: ไม่รู้จะเขียน css อย่างไรดี เพื่อไปควบคุม HTML tag ต่างๆ
ปัญหานี้ สำหรับมือเก๋าแล้ว อาจจะไม่มีปัญหา แค่มองโครงสร้าง HTML แล้วรู้เลยว่า จะเขียน CSS อย่างไร เขียน class, id เพื่อควบคุม HTML เป็นเรื่องง่ายมาก
แต่มือใหม่อย่างผม ^^ เป็นอันต้องงง เพราะยิ่งเว็บไซด์ที่ใหญ่ๆ มีความซับซ้อน หรือต้องเขียน Responsive Website เป็นอันว่างานเข้า ต้องนั่งเทียนกันล่ะว่า จะเขียน css ยังไง เขียนแล้วมาคิดว่า มันจะใช้งานได้หรือเปล่า คนอื่นเค้าเขียนอย่างนี้ไหม และอื่นๆอีกมากมาย
สุดท้าย ก็เขียนแบบพอผ่านๆ ไป ผลลัพธ์คือ css ชนกันกระจาย บ้างก็ซ้ำซ้อน บ้างก็แก้ไขยาก บ้างก็หน้าเว็บไซด์พังไปเลยก็มี แก้ส่วนนี้ กระทบอีกส่วน ยังไม่นับรวมต้องรองรับ IE 7,8,9,10 อื่นๆ (IE พ่อทุกสถาบันจริงๆ)
แต่ถ้าเรามาเขียน LESS ปัญหาเหล่านี้จะหมดไป หรือช่วยให้ปัญหาเหล่านี้ แก้ไขไปได้เยอะ เพราะสิ่งที่ LESS สร้างมานั้น ถึงแม้ว่าใครไม่ค่อยมีความรู้เรื่อง CSS ก็เขียนได้ ยกตัวอย่าง มี HTML แบบนี้
<div id="page"> <ul> <li class="active">link 1</li> </ul> <ul> <li>link 2</li> </ul> </div>
เราจะเขียน LESS ได้ดังนี้
#page {
padding: 10px;
text-align: center;
ul {
margin: 4px;
font-size: 14px;
li {
color: #ffcc00;
&.active {
background-color: ccc;
padding: 5px;
}
}
}
}
ถ้าสังเกตให้ดี เราไม่ต้องจำว่า เราต้องเขียนอะไรยังไง เพียงแค่เอาชื่อ html tag มาวางซ้อน เหมือนกับที่เขียน HTML tag เลย และใส่ attribute ของ css เข้าไปเฉยๆ
ถ้าง่ายคือ ไม่ว่าเราจะเพิ่ม HTML tag เยอะขนาดไหน LESS ก็เขียนเหมือน HTML tag เลย เมื่อต้องการแก้ไขต่อเติมก็ง่ายมากๆ ไล่ดูตาม HTML tag เท่านั้นพอ
และไม่มีการเขียนซ้ำซ้อน CSS ของเราจะถูกเขียนขึ้นโดยใช้เท่าที่จำเป็น ส่วนไหนที่ไม่จำเป็นเราสามารถตัดทิ้งได้เลย
ลองคิดดูว่า ถ้าเว็บไซด์ที่ใหญ่ๆ HTML เป็นหลายร้อย หรือเป็นพันบรรทัด การเขียน CSS เพิ่มคุม HTML tag จะสนุกขนาดไหน เราแทบไม่รู้เลยว่า เราเขียน tag นี้ไว้ที่ไหน เราเคยเขียนไว้แล้วหรือเปล่า สุดท้ายถ้าใช้การเขียน CSS แบบเดิมๆ คือ เขียนของใหม่ต่อไปเรื่อยๆ ถ้าเขียนซ้ำซ้อนกัน วิธีการแก้ปัญหาคือ !important ซึ่งเป็นแค่การแก้ปัญหาที่ปลายเหตุเท่านั้น
สรุป นี้คือรูปแบบใหม่ในการเขียน CSS ด้วย LESS ถ้าใครยังไม่ลองเขียน ก็ต้องเปลี่ยนมาเขียน LESS แล้วนะครับ บทความต่อๆ ไปจะพูดถึงวิธี compile LESS และการนำไปประยุกต์ใช้งาน 🙂
เว็บไซด์หลัก; http://www.lesscss.org
- เตือนภัยมิจฉาชีพ แอบอ้างเป็น Phalconhost !!! - May 7, 2023
- โครงการบ่มเพาะนักพัฒนานวัตกรรมและเทคโนโลยี (Hero Team) - January 28, 2022
- PhalconHost จัดกิจกรรมส่งมอบของขวัญพิเศษแทนคำขอบคุณลูกค้าที่ไว้วางใจและสนับสนุนเราด้วยดีเสมอมา - January 18, 2021
Trackback from your site.