สอนวิธีเขียน CSS3 ง่ายๆ ด้วย LESS

less css

LESS เป็น tool ที่ทำมาเพื่อช่วยให้เราเขียน css ได้สะดวกรวดเร็วขึ้นครับ หลักการของมันก็ง่ายๆ คือ แทนที่เราจะเขียน css ด้วย syntax แบบเดิม(.css) เราก็จะเปลี่ยนมาเขียน css ด้วย syntax แบบ LESS แทน(.less) ซึ่งการเขียนแบบ LESS นี้ เราจะสามารถใช้ “ตัวช่วย” ต่างๆ ของ LESS ได้ หลังจากที่เราเขียนเสร็จแล้ว ก่อนที่จะนำไปใช้งานจริง เราก็จะต้อง “แปลง” syntax แบบ LESS นั้น ให้กลับมาเป็น syntax แบบ css ทั่วไปครับ

การใช้ LESS ไม่ยากอย่างที่คิด!

หลังจากที่ผมได้บอกไปแล้วว่า การจะใช้ LESS นั้น เราจำเป็นต้องเรียนรู้การเขียน syntax แบบ LESS เพิ่มเติมนะ แล้วยังจะต้องแปลงไฟล์ .less ให้กลับมาเป็น .css ก่อนนำไปใช้จริงอีกด้วย บางคนโดยเฉพาะ designer อาจถอดใจ เพราะคิดว่ามันยุ่งยาก แทนที่มันจะช่วยให้เราเขียนโค้ดได้ไวขึ้น กลับทำให้เขียนช้าลงหรือเปล่า?

แน่นอนครับ ผมเชื่อว่าหลายๆ คนเคยเป็นแบบนั้น รวมถึงตัวผมเองด้วย แต่เมื่อลองมาเทียบเวลาที่เราจะต้องใช้เพิ่มขึ้นเพียงเล็กน้อยในการเรียนรู้ เพื่อแลกกับเวลาที่เราสามารถลดไปได้อย่างมากในการพัฒนา ผมถือว่าคุ้มค่ามากๆ ครับ

เริ่มลงมือเขียน CSS ด้วย LESS กันดีกว่า!

ให้เราเริ่มต้นด้วยการสร้าง text ไฟล์เปล่าๆ ขึ้นมา แล้วตั้งชื่อให้เป็น “style.less” ครับ จากนั้นให้เราใส่โค้ด 2 บรรทัดนี้เอาไว้ที่ <head>

สังเกตนะครับว่า เราจะต้องเปลี่ยน rel จากปกติที่เป็น “stylesheet” มาเป็น “stylesheet/less” แทน ส่วน href นั้น ให้เราระบุที่อยู่ของไฟล์ “style.less” ของเราครับ นอกจากนั้น เราจะต้องใส่ไฟล์ javascript ตัวนึงเข้าไปด้วย ซึ่งมันก็คือ “ตัวแปลง(Compiler)” syntax แบบ LESS ของเรา ให้กลายเป็น syntax แบบ css ปกตินั่นเอง เพียงเท่านี้ เราก็พร้อมที่จะใช้ LESS แล้วครับ (ในบทความนี้ เราจะเน้นที่การใช้งานก่อน ผมจึงเลือก compile โดยใช้ javascript ซึ่งทำได้ง่ายแต่จะมีข้อเสียตรงที่เป็นการ compile ทางฝั่ง client ส่วนรายละเอียดในการ compile ทางฝั่ง server นั้น สามารถเข้าไปอ่านเพิ่มเติมได้ที่ LESS)

จริงๆ แล้ว การเขียนแบบ LESS นั้น ก็เหมือนกับการเขียน css แบบปกติเลยครับ เพียงแต่เราต้องมาเขียนในไฟล์นามสกุล “.less” แทนที่จะเป็น “.css” เท่านั้นเอง ทีนี้เรามาพูดถึงตัวช่วยที่ LESS ให้มากันดีกว่าครับ ว่ามันมีอะไรบ้าง แล้วแต่ละตัวช่วยมีวิธีใช้งานอย่างไร ในบทความนี้ เราจะพูดถึงเฉพาะตัวช่วยที่เด่นๆ ของ LESS ซึ่งมีดังนี้ครับ

  • Variablesเอาไว้เก็บค่าที่เราใช้บ่อยๆ เพื่อความสะดวกในการแก้ไข
  • Functions & Operationsช่วยให้เราสามารถกำหนด value แบบเป็นสัดส่วน หรือให้มีความสัมพันธ์กับ value อื่นๆ ได้
  • Mixinsคล้าย Variables แต่ต่างกันตรงที่ Mixins จะเก็บกลุ่มของ properties แทนการเก็บค่าเพียงค่าเดียว
  • Nested Rulesช่วยให้เราเขียน selector ได้สั้นลง และดูเข้าใจง่ายขึ้น

กำหนดค่าที่ใช้บ่อยๆ ให้เป็น “Variables”

เริ่มกันที่ตัวช่วยแรกกันเลยครับ นั่นก็คือ “Variables” หรือ “ตัวแปร” นั่นเอง เคยมั้ยครับ? ที่เวลาเราจะแก้ value อะไรสักค่านึง เราต้องไปไล่หาว่ามันอยู่ตรงไหนบ้าง ปัญหานี้จะหมดไป ถ้าเราใช้ Variables ครับ

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

การเปลี่ยนแปลงค่าของ Variables ที่เราได้กำหนดไว้ จะมีผลในทุกๆ จุดที่เราได้เรียกใช้ Variable นั้นๆ ครับ ซึ่งมันมีประโยชน์มากในการปรับแต่งการแสดงผล จากนี้ไป เวลาเราอยากจะแก้ค่าของอะไรสักค่า เราก็ไม่ต้องไปไล่แก้ในทุกๆ จุด ที่เราเคยใส่ไปแล้วล่ะครับ

กำหนด value แบบ dynamic ได้ด้วย “Operations”

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

จากโค้ดแบบ LESS ด้านบน เราอยากให้กล่องใหญ่มีความกว้างเป็น 2 เท่า ของกล่องเล็ก และมีสีอ่อนกว่านิดหน่อย หากเราแปลงโค้ด LESS ดังกล่าวให้เป็นโค้ด css ธรรมดา ก็จะได้โค้ดหน้าตาแบบนี้ครับ

จะเห็นว่า Operations ช่วยให้เราสามารถกำหนดหน้าตาของกล่อง 2 กล่องนี้ ให้มีความสัมพันธ์กันได้ เมื่อเราเปลี่ยนหน้าตาของกล่องเล็ก หน้าตาของกล่องใหญ่ก็จะเปลี่ยนไปด้วยครับ

รวมหลาย properties เข้าด้วยกันด้วย “Mixins”

ในปัจจุบัน หากเราจะเขียน properties ให้รองรับทุกๆ web browsers นั้น การใช้เพียง property เดียวอาจไม่พอ สมมติว่าเราต้องการจะเปลี่ยนขอบของกล่องหนึ่งให้มน เราจะต้องเขียนแบบนี้ครับ

บางคนอาจจะเขียนกันจนชินไปแล้ว แต่จะดีกว่ามั้ย หากเราสามารถเขียนได้สั้นกว่านี้? Mixins สามารถช่วยเราได้ครับ โดยหลักการของมันจะคล้ายกับ Variables เลยครับ เพียงแต่ Mixins นั้น จะใช้แทน “class” ลองดูตัวอย่างต่อไปนี้ครับ

จากโค้ดด้านบน เราสร้าง class ที่ชื่อ “roundedCorners” ขึ้นมา จากนั้นเราใส่ properties ต่างๆ ที่จะทำให้ขอบมนเอาไว้ใน class นี้ จากนี้ไป หากเราต้องการจะทำขอบมนที่ element ไหน เราก็แค่กำหนด property ที่ element นั้นให้เป็น class “roundedCorners” ความสามารถของ Mixins ยังไม่หมดแค่นั้นครับ เรายังสามารถใช้ Variables ร่วมกับ Mixins ได้ด้วย ลองดูตัวอย่างนี้ครับ

เมื่อนำ Variables มาใช้ร่วมกับ Mixins นอกจากเราจะสามารถสร้างขอบมนได้ง่ายๆ แล้ว เรายังสามารถกำหนดขนาดของความมนผ่าน Mixinsได้อีกด้วย หากเรานำ 2 อย่างนี้ไปประยุกต์ใช้ดีๆ จะช่วยให้เราเขียน css ได้ไวขึ้นเยอะเลยล่ะครับ

เขียน selectors แบบ “Nested Rules”

หลายๆ คน คงเคยใช้การย่อหน้าและการเว้นบรรทัด เพื่อช่วยให้การเขียน selectors ดูเป็นระเบียบ และอ่านเข้าใจได้ง่ายขึ้น เวลามาแก้โค้ดทีหลัง จะได้ไล่โค้ดได้สะดวกใช้มั้ยล่ะครับ

จากโค้ด css ด้านบน เราสามารถเขียนโค้ดแบบ LESS ได้ดังนี้ครับ

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

บทสรุปการเขียน css ด้วย LESS

LESS ช่วยให้เราเขียน css ได้สะดวกรวดเร็วขึ้น ผิดพลาดน้อยลง การจะมา debug โค้ดในภายหลังก็ทำได้ง่าย จริงๆ แล้ว เรายังสามารถนำตัวช่วยของ LESS ไปประยุกต์ใช้ได้อีกหลายๆ แบบเลยล่ะครับ ไว้คราวหน้าผมจะมานำเสนอ Mixins ที่คนนิยมใช้กัน อย่าลืมติดตามนะครับ

(Visited 10,002 times, 4 visits today)

12 Responses to “สอนวิธีเขียน CSS3 ง่ายๆ ด้วย LESS”

  1. LESS ดีและแย่กว่า Sass ตรงจุดไหนบางครับ?

    • Thanathip Tharawanich says:

      less ค่อนข้าง compile ได้รวดเร็วครับ ถ้าไปใช้ร่วมกับ dev tool อย่าง IDE ค่าย jetbrains จะทำงานได้สะดวกยิ่งขึ้นครับ การติดตั้งใช้งานค่อนข้างในช่วงพัฒนาเพราะ link แค่ compiler less.js (แต่ไม่แนะนำให้ใช้ในช่วง production นะครับ), feature less อาจจะน้อยกว่า sass แต่แค่ feature หลักๆ แบบ variable, mixins, nested rules ก็ช่วยให้ชีวิตเราง่ายขึ้นแล้วครับ

  2. Siam HTML says:

    ถ้าเอาความต่าง ณ เวลานี้ที่ผมตอบนะครับ
    การจะใช้ Sass เราต้อง compile ก่อนเสมอ ซึ่งสามารถทำได้ทั้งบน Server และ Local
    ส่วน LESS เดิมต้อง compile ที่ Client โดยใช้ js เท่านั้น(ซึ่งเสียเวลาสำหรับ client)
    แต่ในปัจจุบัน เรามี tool สำหรับ compile LESS ก่อนนำไปใช้จริงแล้วครับ เช่น
    http://wearekiss.com/simpless
    http://leafo.net/lessphp/

    ดังนั้น ความต่างๆ จึงอยู่ในส่วน features ของมันมากกว่า
    ซึ่งผมมองว่า Sass ทำได้ละเอียดกว่า ซับซ้อนกว่า แต่ใช้ยากกว่า
    ส่วน LESS นั้นออกแบบมาให้ใช้งานได้ง่ายกว่า แต่อาจทำบางอย่างที่ Sass ทำได้ ไม่ได้ครับ
    สรุปคือ ถ้าเราใช้งานทั่วไป ใช้ LESS ก็โอเคในระดับหนึ่งแล้วครับ

    • Thanathip Tharawanich says:

      Sass ใช้ ruby เป็น compiler ครับ ซึ่งจะยุ่งยากกว่าหน่อย เพราะจะต้อง compile แบบ server side ซึ่งผิดกับ less ที่ support ทั้งการ compile แบบ server side (nodejs) และ client side (เพียงแค่ include less.js) และด้วยความที่มันเขียนด้วย nodejs จะได้อานิสงค์เรื่อง performance ตามไปด้วย compile ได้รวดเร็วกว่า sass แต่ถ้าพูดถึงเรื่อง feature แล้ว sass ค่อนข้างซับซ้อนกว่ามาก โดยเฉพาะถ้านำไปใช้ร่วมกับ compass

  3. manow says:

    เป็นบทความที่ดีมากเลยค่ะ ไว้จะลองนำไปใช้บ้าง ^^

  4. Apichai Densamut says:

    สุดยอดเลย เด่วจะหัดใช้บ้างละ

  5. Puwadon Sricharoen says:

    รวบรวมความรู้เว็บดีไซน์ Web Design CSS HTML , ร่วมแชร์ความรู้เกี่ยวกับการพัฒนาเว็บไซต์

    Free Tutorials Online Examples

    http://igencoll.igensite.com/

    ลองดูนะครับ อาจจะได้ไอเดียเพิ่มครับผม

  6. Vootou Enjoy says:

    แจ่มครับ กำลังศึกษาอยู๋เลย

  7. Rainy says:

    ขอบคุณครับ

  8. Kittipong Bunmuang says:

    มันเยี่ยมจริงๆๆ :)

  9. เจ๋งดี ครับ

  10. ผมทำไม่ได้ ไม่รู้ผิดตรงไหน

Leave a Reply