July 14, 2020

LESS CSS คืออะไร ?

LESS คืออะไร?

LESS เป็นเครื่องมือช่วยที่จะทำให้เขียน CSS ได้สะดวกมากขึ้น โดยวิธีการใช้คือเขียนไฟล์ LESS จากนั้นนำไปแปลงเป็น CSS เพื่อนำไปใช้งานต่อ


หลักการใช้งาน LESS

หลักการใช้งาน LESS คือ แทนที่เราจะเขียน syntax CSS แบบเดิม เราจะไปเขียน syntax LESS แบบใหม่ จากนั้นจึงนำแปลงเป็น CSS syntax ด้วยเครื่องมือช่วยต่างๆ ก่อนนำไปใช้งานจริง

ยกตัวอย่างเช่น  Extensions เสริมของ Visual Code อย่าง Easy LESS ที่จะ Generate css ไฟล์ให้อัตโนมัติเมื่อทำงาน Save LESS ไฟล์


จุดเด่นของ LESS

1. Variables

สำหรับเก็บค่าที่เราใช้บ่อยๆ เพื่อให้แก้ไขได้สะดวกมากขึ้น

2. Functions and Operations

เพื่อให้แบ่งกำหนดค่า Variables ที่สำคัญมาใช้ให้มีความสัมพันธ์ เช่น ความสัมพันธ์แบบเป็นสัดส่วน ( *2 , /2 )

3. Mixins

สามารถเก็บกลุ่มของค่า Properties ไว้ได้

4. Nested Rules

ช่วยให้เราเขียน Selector ได้เข้าใจและดูง่ายขึ้น


วิธีการเขียน LESS พื้นฐาน

1. Variables 

Variables หรือ ตัวแปร คือการที่ใช้กำหนดค่าๆนึงไว้สำหรับ Variables โดยจะใช้เครื่องหมาย “@” ตามด้วยชื่อตัวแปรที่จะตั้ง จากนั้นจึงกำหนด Values ลงไปโดยใช้ : แทน = ใน syntax ปกตินั่นเองครับ

2. Functions and Operations

ในบางครั้ง เราต้องการให้ค่าของ element หนึ่งให้สัมพันธ์กับอีก element หนึ่ง เราสามารถใช้ Operations ได้ โดยเราจะสามารถ บวก ลบ คูณ หาร กับ value ของ properties อื่นๆได้นั่นเองครับ

3. Mixins

Mixins นั้นมันเหมือน Variables เลยครับ แต่ Mixins จะใช้แทน Class แทนเพื่อให้เราสามารถจัดกลุ่มของ properties เข้าด้วยกันได้เพื่อให้สะดวกมากขึ้น

นอกจากนี้เรายังสามารถใช้ร่วมกับ Variables ได้

4. Nested Rules

เวลาเขียน css หากเราไม่ย่อหน้าเองจะทำให้สับสนเวลาดู selectors เนื่องจากหากไม่เป็นระเบียบจะทำให้มองยาก ทำให้แก้โค้ดยาก โดยใน LESS เราสามารถเขียนได้ง่ายกว่า CSS ทำให้แก้ไขได้สะดวก

สรุป

LESS สามารถช่วยให้เราเขียน css ได้สบายมากขึ้น การจะมาแก้ไขภายหลังก็ทำได้ง่าย ผมจึงแนะนำให้ใช้ LESS ครับ

อ้างอิง : http://www.siamhtml.com/less-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-%E0%B8%AA%E0%B8%AD%E0%B8%99%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99/


 
Facebook Comment