วิธีจัดการงบกว่า 1 ล้านบาท กับ KPI ที่สูงขึ้น!
Table Of Contents
Table Of Contents

ต้องการที่ปรึกษา หรือผู้เชี่ยวชาญในการรับทำเว็บไซต์ 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 จากทางเราได้เลย

อ้างอิง : 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/


 

บทความที่เกี่ยวข้อง

WordPress Theme

อัปเดต 20 WordPress Theme ยอดนิยมสำหรับทำเว็บไซต์ 2024

WordPress Hosting ยอดนิยมในไทย

10 WordPress Hosting ยอดนิยมในไทย อัปเดตล่าสุด 2024

Add Your Heading Text Here

Add Your Heading Text Here

Add Your Heading Text Here