Reading Time: 2 Mins
2 Mins
Jul 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

LESS สามารถช่วยให้เราเขียน css ได้สบายมากขึ้น การจะมาแก้ไขภายหลังก็ทำได้ง่าย ทาง Cotactic Media จึงแนะนำให้ใช้ 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/


 

[wpdevart_facebook_comment curent_url="https://www.cotactic.com/" order_type="social" title_text="Facebook Comment" title_text_color="#000000" title_text_font_size="22" title_text_font_famely="Montserrat" title_text_position="left" width="100%" bg_color="#d4d4d4" animation_effect="random" count_of_comments="3" ]

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

Hybrid Working คืออะไร? เทรนด์การทำงานยุคใหม่ ที่คุณควรรู้!

Hybrid Working คืออะไร การทำงานแบบไฮบริด (Hybrid working) คือการทำงานในออฟฟิศ ผสมผสานกับการทำงานระยะไกลจากสถานที่อื่น เช่น จากบ้าน ใน Co-Working Space หรือสถานที่อื่น ๆ ถือเป็นวิธีการทำงานที่ยืดหยุ่น ทำให้พนักงานเลือกการทำงานได้ ว่าจะทำงานอย่างไร เมื่อไร และที่ไหน ซึ่งช่วยเพิ่มประสิทธิภาพและสร้างความสมดุลในการทำงาน รวมถึงชีวิตส่วนตัวของพนักงานมากยิ่งขึ้น โดยการทำงานแบบไฮบริดจะแตกต่างกันไป ขึ้นอยู่กับความต้องการขององค์กร และพนักงานของบริษัทนั้น ๆ ตัวอย่างเช่น บางบริษัทอาจอนุญาตให้พนักงาน ทำงานจากที่บ้าน (Work From Home) 2 วันต่อสัปดาห์ และมาทำงานที่ออฟฟิศ 3 วันต่อสัปดาห์ ทั้งนี้การทำงานแบบไฮบริดเป็นที่นิยมมากขึ้นในปีหลัง ๆ เนื่องจากการพัฒนาของเทคโนโลยี ที่ทำให้การทำงานจากระยะไกลเป็นไปได้ และมีประสิทธิภาพมากยิ่งขึ้น ซึ่งการระบาดของโรค COVID-19 เป็นอีกหนึ่งปัจจัยที่ส่งผลให้การทำงานแบบ Hybrid Working เกิดขึ้นอย่างแพร่หลาย เนื่องจากบริษัทหลายแห่งต้องปรับตัวให้สอดคล้องกับมาตรการที่สาธารณสุขกำหนดไว้   5 ประโยชน์สำคัญของ Hybrid Working 1.เพิ่มความยืดหยุ่น […]

Data Analysis คืออะไร? มีวิธีใช้และประโยชน์ต่อธุรกิจอย่างไร?

Data Analysis คืออะไร   Data Analysis คือ กระบวนการวิเคราะห์ข้อมูลที่ถูกเก็บหรือบันทึกไว้ เพื่อค้นหาสิ่งที่มีประโยชน์มาต่อยอดการทำงานที่เราต้องการ โดยเฉพาะในภาคธุรกิจที่มีการนำเอาข้อมูลและผลประกอบการทั้งหมด มาตรวจสอบ แยกแยะ และแจกแจงให้เข้าใจง่ายเพื่อใช้เป็นเกณฑ์ในการวางแผนกลยุทธ์ หรือประกอบการตัดสินใจในเรื่องสำคัญ ถือเป็นอีกหนึ่งกระบวนการทำงานที่ช่วยให้เราเข้าใจภาพรวมของตัวธุรกิจได้ดียิ่งขึ้น ทำให้เราสามารถคาดเดาผลลัพธ์หรือจำลองความเป็นไปได้ต่าง ๆ ได้อย่างครอบคลุมมากที่สุด   ดังนั้น Data Analysis จึงถือเป็นกระบวนการที่มีประโยชน์และจำเป็นอย่างมากในยุคดิจิทัล เพราะเราจะสามารถนำเอาข้อมูลที่อยู่บนเว็บไซต์โฮมเพจและสื่อสังคมออนไลน์มาวิเคราะห์หรือตรวจสอบ เพื่อนำไปพัฒนาตัวธุรกิจให้สามารถสร้างผลลัพธ์ได้อย่างที่เราต้องการ นับเป็นอีกหนึ่งกระบวนการทำงานที่นักการตลาดและที่ปรึกษาการตลาดออนไลน์ทั่วโลกต่างเลือกใช้   หลักการทำงานของ Data Analysis   1.Market Analysis Market Analysis คือการวิเคราะห์ตลาดผ่านข้อมูลทั้งหมดที่ตัวธุรกิจได้เก็บหรือบันทึกไว้ เพื่อหาแนวโน้มการทำงานและความเป็นไปได้ของตลาดในอนาคต ซึ่งจะช่วยให้เราสามารถวางแผนกลยุทธ์ แคมเปญ โปรโมชั่น หรือเลือกช่องทางการจำหน่ายสินค้าบริการได้อย่างเหมาะสม ทำให้เราสามารถเข้าถึงผู้บริโภคและกลุ่มลูกค้าได้อย่างตรงจุด ถือเป็นอีกหนึ่งกระบวนการทำงานที่มีความสำคัญและมีความจำเป็นอย่างยิ่งในยุคดิจิทัล เพราะมันจะช่วยให้การทำการตลาดบนโลกออนไลน์มีประสิทธิภาพมากที่สุดเท่าที่จะทำได้ ดังนั้นการทำ Market Analysis จึงจำเป็นต้องทำอย่างรอบคอบ ต้องอาศัยผู้เชี่ยวชาญที่มีความรู้และประสบการณ์ ถึงจะวิเคราะห์ข้อมูลได้อย่างแม่นยำและมีความถูกต้องมากที่สุดนั่นเอง   2.Data Mining Data Mining […]