July 14, 2020

LESS CSS คืออะไร ?

Reading Time: 2 minutes

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
บทความที่เกี่ยวข้อง

Ads Extension ฟีเจอร์เด็ด ช่วยเพิ่มความน่าสนใจให้กับโฆษณา

Reading Time: 3 minutes ปัจจุบัน Google Ads เป็นอีกหนึ่งช่องทางโฆษณาที่ได้รับความนิยมอย่างมาก เนื่องจากสามารถช่วยเพิ่ม Traffic เว็บไซต์ได้อย่างรวดเร็ว และสามารถเพิ่มยอดขายบนเว็บไซต์ได้จริง อย่างไรก็ดี หากคุณต้องการใช้งาน โฆษณา Google Ads ให้มีประสิทธิภาพมากยิ่งขึ้น เราขอแนะนำให้รู้จักกับ Ads Extension ฟีเจอร์เสริมพิเศษ สำหรับการทำโฆษณาประเภท Search Ad รายละเอียดจะเป็นอย่างไร ศึกษาได้จากบทความนี้! Ads Extension คืออะไร Ads Extension หรือที่เรียกกันว่า “ส่วนขยายโฆษณา” คือ ฟีเจอร์พิเศษที่อนุญาตให้คุณใส่ข้อมูลเพิ่มเติม เช่น ลิงก์อื่น ๆ เบอร์โทรศัพท์ หรือสถานที่ตั้ง เพื่อให้โฆษณาบนหน้า Search Ad ของคุณน่าสนใจยิ่งขึ้น เพิ่มคะแนนคุณภาพโฆษณา รวมถึงเพิ่มอัตราการคลิกเข้าชมหน้า Landing Page ซึ่งจะนำไปสู่การจ่ายค่าโฆษณาที่ถูกลงนั่นเอง   ประเภทของ Ads Extension   1. Sitelinks Extension  Sitelinks […]

SEM คืออะไร มีกี่ประเภท สรุปให้เข้าใจง่าย ๆ ภายใน 5 นาที

Reading Time: 5 minutes หลายครั้งที่คุณค้นหาข้อมูลบน Google คุณจะพบว่าบางเว็บไซต์ที่ปรากฏเป็นอันดับแรก ๆ บนหน้า Google Search จะมีคำว่า Ad ตัวเล็ก ๆ กำกับอยู่หน้าชื่อเว็บไซต์เสมอ นั่นแสดงให้เห็นว่า พวกเขากำลังทำการตลาดแบบ SEM หรือ Search Engine Marketing เพื่อให้กลุ่มเป้าหมาย Search เจอเว็บไซต์ของพวกเขาเป็นอันดับแรก ๆ แท้จริงแล้วการทำ SEM คืออะไร? หากต้องการจะทดลองทำต้องเริ่มต้นจากอะไร มาเรียนรู้ไปด้วยกันในบทความนี้! SEM คืออะไร? Search Engine Marketing หรือ SEM คือ การทำการตลาดบน Search Engine เช่น Baidu, Bing, Yahoo รวมถึง Search Engine ที่ได้รับความนิยมสูงสุดอย่าง Google ซึ่งการตลาดในลักษณะนี้จะต้องอาศัยการกำหนด Keyword ขึ้น ก่อนดำเนินการปรับแต่งเว็บไซต์ หรือจ่ายค่าโฆษณา เพื่อให้เว็บไซต์ติดอันดับแรก ๆ […]

Google Trends คืออะไร มีประโยชน์อย่างไรกับการทำ SEO

Reading Time: 2 minutes อย่างที่เราทราบกันดีว่าการทำ SEO คือ การปรับแต่งโครงสร้างเนื้อหาภายในของตัวเว็บไซต์ ให้เป็นไปตามหลักเกณฑ์ที่ทาง Google ได้กำหนดไว้ เช่น ปรับแต่งตัวเว็บให้เป็นมิตรกับผู้ใช้งาน, ใส่ Keyword ที่เกี่ยวข้องลงไปในเนื้อหา หรือจัดเรียงหัวข้อและคอนเทนต์ต่าง ๆ ให้เป็นระเบียบ เป็นต้น ซึ่งการปรับแต่งเหล่านี้จะทำให้ Google เลือกแสดงเว็บไซต์ของเราเป็นอันดับต้น ๆ บนหน้าค้นหา เพราะอัลกอริทึ่มจะมองว่าเว็บไซต์ของเราว่ามีคุณภาพ น่าเชื่อถือ และมีประโยชน์ต่อผู้ใช้งานนั่นเอง โดยการทำ SEO ให้มีประสิทธิภาพในปัจจุบันนั้น อาจต้องพึ่งพาเครื่องมือหรือตัวช่วยดี ๆ เพื่อที่จะทำให้การทำงานของเราสะดวกและแม่นยำมากยิ่งขึ้นครับ วันนี้ Cotactic จึงอยากจะพาผู้ประกอบการทุกท่านไปรู้จักกับ Google Trend เครื่องมือสารพัดประโยชน์ที่ช่วยให้การทำ SEO เป็นไปได้อย่างราบรื่น และต่อยอดการทำงานด้านอื่น ๆ ได้อีกมากมาย โดยมันจะมีประโยชน์ต่อการทำธุรกิจมากน้อยขนาดไหน เราไปดูกันเลยครับ Google Trends คืออะไร Google Trends คือเครื่องมือที่ใช้วิเคราะห์แนวโน้มหรือพฤติกรรมการค้นหา Keyword ต่าง ๆ ของผู้ใช้งาน โดยนำปริมาณการค้นหา Keyword […]

Reading Time: 2 minutesCOTACTIC