ต้องการที่ปรึกษา หรือผู้เชี่ยวชาญในการรับทำเว็บไซต์ WordPress คลิกที่นี่
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
LESS สามารถช่วยให้เราเขียน css ได้สบายมากขึ้น การจะมาแก้ไขภายหลังก็ทำได้ง่าย ทาง Cotactic Media จึงแนะนำให้ใช้ LESS ครับ หรือหากใครต้องการผู้ช่วยในการทำเว็บไซต์ตั้งแต่ต้นจนจบแบบไม่ต้องการปวดหัวเรื่องโค๊ดด้วยตัวเองก็สามารถใช้บริการรับทำเว็บไซต์ WordPress จากทางเราได้เลย