d62 how to less css preprocessor tutorial

[Hot Topic] LESS CSS สอนเทคนิคเทพที่จะเปลี่ยนการเขียน CSS ของคุณ !!

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

[UPDATE] ถ้าใครสนใจการใช้งาน SASS ซึ่งเป็นญาติของ LESS CSS ที่ความสามารถมากกว่า สามารถ อ่านบทความสอน SASS ได้เลยครับ

LESS CSS เป็นเทคนิคการเขียน CSS ที่เค้าเรียกว่า CSS Preprocessors ซึ่งความหมายมันก็ตามชื่อเลยครับ Preprocessors หมายถึงต้องมีการ Process ก่อนถึงจะใช้งานได้ (จะอธิบายถึงคำว่า Preprocess ว่าทำไมถึงเรียกแบบนี้ในส่วนหลังของบทความครับ) ตอนนี้ขอสรุปให้ฟังสั้น ๆ ก่อนว่า

LESS CSS จะช่วยนำเทคนิคในภาษา Programming เข้ามาร่วมในการเขียน CSS ซึ่งจะทำให้โค้ดที่เราเขียนเป็นระเบียบ และนำมาใช้ใหม่ได้ง่ายขึ้น (คนอ่านคนถามว่าสั้นตรงไหน = =)

ใครไม่เคยเขียนโปรแกรมไม่ต้องเป็นห่วงครับ เพราะเค้าออกแบบมาให้ดีไซน์เนอร์ใช้ หรือถ้าใครมีพื้นฐานอยู่แล้วก็จะสามารถเปรียบเทียบคอนเซปต์ของ LESS CSS กับภาษา Programming ได้ ทำให้เข้าใจได้ง่ายขึ้นครับ เรามาดูตัวอย่างการใช้ LESS CSS เรียกน้ำย่อยกันก่อน

ตัวอย่างการใช้ LESS CSS

นาย A ต้องการใช้สีเดียวกันซ้ำ ๆ ในหลาย ๆ ส่วนบนหน้าเว็บ เค้าจะเขียนโค้ดแบบนี้

#header { color: #7d2717; }
h2 { color: #7d2717; }
footer h3 { color: #7d2717; }

เวลานาย A จะแก้สีจาก #7d2717 เป็นอย่างอื่น จะต้องมาคอยตามหาว่าส่วนไหนในเว็บใช้สีนั้นไปบ้าง ยิ่งถ้าแบ่ง CSS เป็นหลายไฟล์ยิ่งทำให้เกิดความล่าช้าในการแก้ไข

แต่ถ้านาย A ใช้ LESS CSS ในการเขียน โค้ดจะกลายเป็นแบบนี้

@maincolor: #7d2717;
#header { color: @maincolor; }
h2 { color: @maincolor; }
footer h3 { color: @maincolor; }

อันนี้เป็นเทคนิคแรกของ LESS CSS นั่นคือการ กำหนดตัวแปร นั่นเอง บรรทัดแรกเขียนว่า @maincolor: #7d2717; ซึ่งเป็นการกำหนดตัวแปรชื่อ maincolor ให้มีค่า #7d2717 ครับ และเวลาจะเรียกใช้ตัวแปรนี้นาย A ก็แค่เขียน @maincolor ในตำแหน่งที่ต้องการเรียกใช้ก็พอ

เวลาจะแก้สีแค่เปลี่ยน #7d2717 ในบรรทัดแรกเป็นค่าอื่น สีทั้งเว็บก็จะเปลี่ยนตามแล้วครับ สะดวกดีมั้ยล่ะ

LESS CSS ทำงานยังไง

ก่อนจะมารู้จักความสามารถอื่น ๆ ของ LESS CSS เรามาดูกันก่อนครับว่ามันทำงานยังไง เนื่องจากแอดมินกำลังว่าง ๆ เลยทำเป็นกราฟฟิกให้ดูกันเลย (คลิกเพื่อดูรูปใหญ่ครับ)

สอนวิธีใช้ LESS CSS อย่างง่าย

การที่มันถูกเรียกว่า Preprocessor ก็เพราะว่า มันต้องมีการ Convert ไฟล์ก่อนนำไปใช้ นั่นเองครับ

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

เรามาดูกันก่อนดีกว่าว่า LESS CSS มันทำอะไรได้บ้าง ทำไมผมถึงบอกว่ามันจะเปลี่ยนการเขียน CSS ของคุณได้

ความสามารถอื่น ๆ ของ LESS CSS

1. การกำหนดตัวแปร (Variables) – นอกจากจะกำหนดเป็นค่าสี เช่น #ffffff ได้แล้ว เรายังสามารถกำหนดเป็นตัวเลขได้ด้วย เช่น 50px หรือ 4em

2. การกำหนด Property ทีละเยอะ ๆ (Mixins) – บางครั้งการกำหนดเป็นตัวแปรอาจจะไม่พอ เราอาจอยากกำหนดเป็น CSS Property หลาย ๆ บรรทัดเลย เช่น กรณีเราอยากทำ CSS Transition จะต้องเขียนโค้ดแบบนี้

#transition {
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
#transition2 {
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-ms-transition: all 1s ease-in;
transition: all 1s ease-in;
}

จะเห็นว่าถ้าเรามีหลาย ๆ Element ที่ต้องการใช้ Transition อันเดียวกัน แต่แก้เวลาจาก 0.5s เป็นเวลาอื่น เช่น 1.0s, 1.5s เราจะต้องก็อปโค้ดด้านบนทั้งหมดไปใส่ ทำให้โค้ดเรายาวขึ้นและเวลาแก้ไขจะดูลำบากมากขึ้น ถ้าเราใช้ LESS CSS โค้ดด้านบนจะกลายเป็นแบบนี้

/* การใช้ Mixins */
.trans (@time: 1s) {
-webkit-transition: all @time ease-in;
-moz-transition: all @time ease-in;
-o-transition: all @time ease-in;
-ms-transition: all @time ease-in;
transition: all @time ease-in;
}
/* ตัวอย่างการใช้งาน */
#transition {
.trans(0.5s);
}
#transition2 {
.trans;
}

ใครเคยเขียนโปรแกรมมาเห็นแล้วจะร้องอ๋อทันที มันเหมือนกับการตั้ง function ในการเขียนโปรแกรมเลยครับ

.trans จะเป็นชื่อฟังก์ชั่น ส่วน (@time: 1s) เป็นการบอกว่าค่าที่ผู้ใช้ส่งเข้ามา (ถ้ามี) จะเก็บลงตัวแปรชื่อ time ครับ ส่วนถ้าไม่มีมันจะกำหนดให้ time มีค่าเริ่มต้น นั่นคือ 1s โดยอัตโนมัติ โค้ดด้านใน .trans (@time: 1s) { … } ก็จะเป็นการนำค่า @time ที่รับมาไปใช้นั่นเอง

วิธีการเรียกใช้ function นี้จะเรียกได้ 2 แบบครับ แบบแรกคือ ส่งค่าไปด้วย เช่น .trans(0.5s) จะเป็นการเรียกใช้ฟังก์ชั่นพร้อมส่งค่า 0.5s ไปให้

วิธีการเรียกใช้อีกแบบคือ .trans จะเป็นการเรียกใช้ฟังก์ชั่นแต่ไม่ส่งค่าไปให้ ฟังก์ชั่นก็จะใช้ค่าเริ่มต้นของมัน นั่นคือ 1s นั่นเองครับ

การเขียน Mixins เราไม่จำเป็นต้องกำหนดส่วน (@time: 1s) เสมอไปนะครับ ถ้าเราไม่ต้องการรับค่าใด ๆ เลยก็เอาออกไปเลยก็ได้ หรือถ้าต้องการบังคับให้ตอนใช้ฟังก์ชั่นต้องกำหนดค่าทุกครั้ง (คือไม่มีค่าเริ่มต้น) เราก็เขียนแค่ (@time) ครับ

3. การเขียน Selector แบบเป็นชั้น ๆ (Nested Rules) – ความสามารถต่อไปใช้เวลาที่เราต้องการกำหนด Property ให้ element พื้นฐาน เช่น h1, h2, p ใน div ที่มี ID นั้น ๆ ครับ จากปกติเราต้องเขียนโค้ดแบบนี้

#header h1 { font-size: 14pt; color: #000000; }
#header h2 { font-size: 12pt; color: #333333; }
#header p { font-size: 9pt; color: #555555; }
#header p a { text-decoration: none; }

ถ้าใน LESS CSS เราสามารถเขียนแบบด้านล่างได้ครับ ซึ่งเวลา Convert ไฟล์ (บางคนเรียก Compile) จะกลายเป็นเหมือนโค้ดด้านบนเป๊ะครับ

#header {
h1 { font-size: 14pt; color: #000000; }
h2 { font-size: 12pt; color: #333333; }
p { font-size: 9pt; color: #555555;
a { text-decoration: none; }
}

4. การแก้ไขค่าด้วยการบวกลบคูณหาร (Functions & Operations) – เคยคิดมั้ยครับว่าถ้าเราพิมพ์สมการคำนวณใน CSS มันจะดีแค่ไหน ซึ่ง LESS CSS ช่วยคุณได้ครับ มาดูตัวอย่างการเขียน LESS CSS ในการคำนวณกันเลย

@mycolor: #ff0000;
@myborder: 1px;
#header {
color: @mycolor + #330000;
border-top: @myborder;
border-bottom: @myborder * 3;
border-color: desaturate(@mycolor, 20%)
}

จะเห็นว่านอกจากจะสามารถคำนวณเลข เช่น @myborder * 3 ได้แล้ว (ตัว * ในภาษาโปรแกรมมิ่งคือ คูณ ส่วนตัว / คือ หาร) เรายังสามารถบวกสี หรือใช้ฟังก์ชั่นแปลก ๆ เช่น desaturate กับสีได้ด้วย โดย LESS CSS ได้เตรียมฟังก์ชั่นไว้เล่นกับสีมากมาย เช่น lighten, darken, fadein, fadeout, spin, mix ซึ่งสามารถอ่านวิธีใช้ได้เว็บหลักของ LESS CSS เลยครับผม

การ Convert / Compile ไฟล์ LESS CSS

หลังจากที่ได้เรียนรู้การใช้งานเบื้องต้นและความสามารถของ LESS CSS กันไปแล้ว ตอนนี้มาถึงวิธีการนำ LESS CSS ไปใช้ในงานเว็บไซต์จริงครับ อย่างที่บอกไปว่าจะต้องมีการ Convert ไฟล์ก่อนนำไปใช้ เรามาดูการ Convert แบบง่ายที่สุดก่อน

1. การ Compile LESS CSS ด้วย LESS.js – วิธีนี้เป็นการ Compile แบบอัตโนมัติ คือ เรียกใช้ไฟล์ .less บนหน้าเว็บเลย เสร็จแล้วเรียกใช้ Javascript ที่ชื่อ Less.js เพื่อ compile ไฟล์ .less ที่เราเรียกก่อนหน้านั้น

ไฟล์ Less.js สามารถดาวน์โหลดได้จาก เว็บหลักของ LESS CSS ครับ

อย่างไรก็ตาม วิธีนี้เหมาะกับการใช้ตอนเทสเว็บเท่านั้น เพราะจะทำให้หน่วงในการโหลดเว็บไซต์ เวลานำเว็บไปใช้ใน Production จริงเค้าจะนิยมเอา .less ใส่โปรแกรมเพื่อ Compile ออกมาเป็นไฟล์ CSS ก่อนครับ ส่วนไฟล์ .less ก็เก็บไว้ใช้ตอนแก้ไข เพราะจะแก้ไขได้ง่ายมาก

2. การใช้โปรแกรม Compile LESS CSS ด้วย SimpLESS – วิธีนี้จะเป็นการนำไฟล์ .less ที่เราเขียนไว้แล้วไปใส่ในโปรแกรม SimpLESS เพื่อแปลงเป็นไฟล์ CSS ซึ่งโปรแกรมนี้ฟรี และใช้ได้ทั้งบน Windows, Mac, Linux ครับ

ใช้ไม่ยากเลยใช่มั้ยครับ แค่โยนไฟล์ .less ใส่ เลือกโฟลเดอร์ที่จะเซฟ ก็เรียบร้อยแล้วครับ ถ้าสนใจรีบไป ดาวน์โหลดโปรแกรม SimPLESS มาติดเครื่องเลยครับ

3. การใช้โปรแกรม Editor + Compile LESS CSS ด้วย Crunch – มาถึงโปรแกรมสุดท้าย โปรแกรมนี้เป็นสิ่งที่ทำให้แอดมินต้องหันกลับมามอง LESS CSS อีกรอบครับ เพราะโปรแกรมตัวนี้เราสามารถเขียนโค้ด LESS CSS ในโปรแกรมได้เลย โดยเมื่อเขียนเสร็จแล้วก็สามารถกดเซฟเป็น CSS ได้ทันทีครับ

นอกจากนั้นตัวโปรแกรมยังแบ่งไฟล์ที่เราเซฟเป็น 2 ไฟล์ให้ คือ .less กับ .css ทำให้เวลาเราจะกลับมาแก้ไขก็ทำได้สะดวกมากครับ แถมถ้าเราเขียน LESS CSS ผิดตรงไหน ตอน compile โปรแกรมก็จะบอกเราทันทีว่ามี error บรรทัดที่เท่าไรครับ

ที่สำคัญคือโปรแกรมนี้ฟรี และใช้ได้กับทั้ง Mac และ Windows (เพราะเป็น Adobe Air App) ครับ กดที่รูปด้านล่างเพื่อเข้าเว็บไซต์ของโปรแกรม Crunch เลยครับ!

แปลงไฟล์ LESS CSS ด้วย Crunch App

ข้อเสียมีอยู่นิดหน่อยคือถ้าคอมช้า เวลาพิมพ์ใน Air App อาจจะอืด ๆ ไปบ้างครับ

ใช้วิธี Compile LESS CSS อันไหนดี

อันนี้เป็นวิธีที่ผมใช้ในการเขียน LESS CSS นะครับ หากท่านใดใช้วิธีอื่นรบกวนแนะนำด้วยนะครับ ผมยังเป็นมือใหม่กับการใช้ LESS CSS ครับผม

ในช่วงแรกที่จะเป็นการเขียน + ทดสอบเว็บไซต์ ผมจะใช้ Less.js ในการ compile ก่อนครับ เพราะสามารถแก้ไฟล์ได้ง่ายและเร็ว หลังจากที่จะขึ้น Production ผมก็จะ Compile ไฟล์ less เป็น CSS ทั้งหมดก่อน (ด้วยโปรแกรมในข้อ 2 หรือ 3 ในหัวข้อด้านบน) แล้วนำไปใส่ในเว็บไซต์ครับ

หลายคนอาจมองว่าถ้าแก้ CSS ทีจะต้องแก้ในไฟล์ less ก่อนแล้วเอา compile ก่อนนำไปใช้ อันนี้ผมคิดว่าต้องชั่งน้ำหนักกับความง่ายในการดูแลรักษาเว็บไซต์ (maintainance) ครับ เพราะถ้าเป็นเว็บไซต์ scale ใหญ่ เวลาไล่โค้ดทีคงปวดหัวน่าดู แต่ถ้าใช้ LESS เราก็แค่ไล่ดูตัวแปรที่เราตั้งไว้ แล้วแก้ค่าตัวแปรก็พอครับ

สรุปเรื่องของ LESS CSS

LESS CSS จะทำให้เราเขียนโค้ดออกมาได้มีประสิทธิภาพมากกว่าการเขียน CSS แบบปกติที่เราเขียนกันมาตั้งแต่ยุค CSS2 ครับ ซึ่งก็ต้องแลกกับความลำบากในการ compile เล็กน้อย แต่ตอนนี้ก็มี Tools ให้ใช้มากมายทำให้การ compile เป็นเรื่องง่ายไปเลย

นอกจาก LESS CSS ยังมีตัวที่คล้ายกันชื่อ SASS ด้วยครับ ซึ่งความสามารถจะคล้าย ๆ กันครับ ท่านใดเคยใช้ SASS แล้วเป็นอย่างไรมาแชร์ความรู้กันได้นะครับ 🙂

ลิงค์ที่อ่านเกี่ยวกับ LESS CSS

ท่านใดใช้ LESS CSS/SASS แล้วเป็นอย่างไร หรือมีปัญหาอะไร สามารถโพสถามไว้ในส่วน Comment ด้านล่าง หรือแวะไปถามที่ Designil Facebook Fanpage ได้นะครับ แอดมินฉีดยาแล้วไม่กัดแน่นอนฮะ







There are 11 comments

Add yours
  1. Arthit Khoonyosying

    ขอบคุณสำหรับการสรุปมาให้ได้อ่านครับ อยากลองใช้ขึ้นมาเลยทีเดียว 

  2. Bluenightz

    ของผมสำหรับผู้ใช้แมคแนะนำ ชุดนี้เป็นชุดที่ผมใช้เขียนอยู่ 
    sublime text 2 >> Editor ปลั๊กอินเยอะดีครับ ไม่หนักเครื่อง
    fire.app >> ตัว complier SASS css และสร้าง project พร้อมไฟล์ reset.css หรือ grid template ที่นิยม มีให้เลือกหลายตัวเลือก
    livereload >> ตัวคอย refresh browser เมื่อมีการเปลี่ยนแปลงไฟล์ภายในโฟลเดอร์ที่เรากำหนดไม่ว่าจะเป็น .jpg .gif .png .js .html หรือแล้วแต่เรากำหนด
    zen coding >> เขียนย่อ html, css ต่างๆ
    Littleipsum >> สำหรับ copy wording ตัวอย่างมาใส่ไว้ในเว็บไม่ต้องเสียเวลาเข้าเว็บ
    Monitor ต่อพ่วงอีกตัวนึงเปิดหน้าเว็บค้างไว้ อีกหน้าจอเป็น editor เขียนเสร็จเซฟไฟล์ หน้าจออีกอันเปลี่ยนตามสะดวกดีครับ

    ใครมีชุดไหนก็มาแชร์กันนะครับ

    • Designil

      ขอบคุณมากครับที่แวะมาแชร์ความรู้ o_o อ่านแล้วอยากได้จอสองเลยครับ

  3. kizi4

    ฉันรักคุณทุกวันและฉันรักประเทศไทยมากขึ้นกว่าสิ่งที่ฉันชอบ

  4. birdyman

    รบกวนสอบถามหน่อยครับ Crunch ทำยังไงถึงจะ run บน windows ได้อ่ะครับ ผมก็ลง adobe air ไปแล้วบนเครื่องนะตามที่เว็บเค้าบอก และสร้าง folder ไว้สำหรับเก็บไฟล์แล้ว ก็สร้าง IIS ให้ run folder ที่เก็บไฟล์ได้แล้ว แสดงหน้าจอ html แต่ทำอะไรไม่ได้เลยนะครับ

    • Designil

      o_O เอ ปกติถ้าลง Adobe Air น่าจะรันได้ไม่มีปัญหานะครับผม ไม่ทราบว่าปัญหาเป็นยังไงบ้างครับ

  5. Anonymous

    โดยปกติเวลาเขียน ถ้าต้องใช้อะไรซ้ำๆ ก็จะทำในลักษณะการ group ไว้อยู่แล้ว แต่ด้วยเทคนิค less ผมว่ามันช่วยให้ code กระชับเข้าไปอีกนะครับนี้ เออถามท่าน admin หน่อยครับว่า ถ้าเราเขียน less css แบบตัวอย่างด้านบนสุดที่ท่านแนะนำจะได้หรือไม่ครับ แบบว่า ไม่อยากมานั่ง convert อะไรอีก


Post a new comment