[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 ต้องการใช้สีเดียวกันซ้ำ ๆ ในหลาย ๆ ส่วนบนหน้าเว็บ เค้าจะเขียนโค้ดแบบนี้
[css]
#header { color: #7d2717; }
h2 { color: #7d2717; }
footer h3 { color: #7d2717; }
[/css]
เวลานาย A จะแก้สีจาก #7d2717 เป็นอย่างอื่น จะต้องมาคอยตามหาว่าส่วนไหนในเว็บใช้สีนั้นไปบ้าง ยิ่งถ้าแบ่ง CSS เป็นหลายไฟล์ยิ่งทำให้เกิดความล่าช้าในการแก้ไข
แต่ถ้านาย A ใช้ LESS CSS ในการเขียน โค้ดจะกลายเป็นแบบนี้
[css]
@maincolor: #7d2717;
#header { color: @maincolor; }
h2 { color: @maincolor; }
footer h3 { color: @maincolor; }
[/css]
อันนี้เป็นเทคนิคแรกของ LESS CSS นั่นคือการ กำหนดตัวแปร นั่นเอง บรรทัดแรกเขียนว่า @maincolor: #7d2717; ซึ่งเป็นการกำหนดตัวแปรชื่อ maincolor ให้มีค่า #7d2717 ครับ และเวลาจะเรียกใช้ตัวแปรนี้นาย A ก็แค่เขียน @maincolor ในตำแหน่งที่ต้องการเรียกใช้ก็พอ
เวลาจะแก้สีแค่เปลี่ยน #7d2717 ในบรรทัดแรกเป็นค่าอื่น สีทั้งเว็บก็จะเปลี่ยนตามแล้วครับ สะดวกดีมั้ยล่ะ
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 จะต้องเขียนโค้ดแบบนี้
[css]
#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;
}
[/css]
จะเห็นว่าถ้าเรามีหลาย ๆ Element ที่ต้องการใช้ Transition อันเดียวกัน แต่แก้เวลาจาก 0.5s เป็นเวลาอื่น เช่น 1.0s, 1.5s เราจะต้องก็อปโค้ดด้านบนทั้งหมดไปใส่ ทำให้โค้ดเรายาวขึ้นและเวลาแก้ไขจะดูลำบากมากขึ้น ถ้าเราใช้ LESS CSS โค้ดด้านบนจะกลายเป็นแบบนี้
[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;
}
[/css]
ใครเคยเขียนโปรแกรมมาเห็นแล้วจะร้องอ๋อทันที มันเหมือนกับการตั้ง 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 นั้น ๆ ครับ จากปกติเราต้องเขียนโค้ดแบบนี้
[css]
#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; }[/css]
ถ้าใน LESS CSS เราสามารถเขียนแบบด้านล่างได้ครับ ซึ่งเวลา Convert ไฟล์ (บางคนเรียก Compile) จะกลายเป็นเหมือนโค้ดด้านบนเป๊ะครับ
[css]
#header {
h1 { font-size: 14pt; color: #000000; }
h2 { font-size: 12pt; color: #333333; }
p { font-size: 9pt; color: #555555;
a { text-decoration: none; }
}
[/css]
4. การแก้ไขค่าด้วยการบวกลบคูณหาร (Functions & Operations) – เคยคิดมั้ยครับว่าถ้าเราพิมพ์สมการคำนวณใน CSS มันจะดีแค่ไหน ซึ่ง LESS CSS ช่วยคุณได้ครับ มาดูตัวอย่างการเขียน LESS CSS ในการคำนวณกันเลย
[css]
@mycolor: #ff0000;
@myborder: 1px;
#header {
color: @mycolor + #330000;
border-top: @myborder;
border-bottom: @myborder * 3;
border-color: desaturate(@mycolor, 20%)
}
[/css]
จะเห็นว่านอกจากจะสามารถคำนวณเลข เช่น @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 เลยครับ!
ข้อเสียมีอยู่นิดหน่อยคือถ้าคอมช้า เวลาพิมพ์ใน 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 Elements – รวมฟังก์ชั่น LESS CSS ดี ๆ ที่ทำให้เขียน CSS ยิ่งง่ายขึ้นไปอีก
- 10 ตัวอย่างการใช้ LESS CSS ที่น่าเอาไปใช้ในโปรเจคของคุณ
- Video & Presentation ว่าด้วยการใช้ CSS Preprocessor
ท่านใดใช้ LESS CSS/SASS แล้วเป็นอย่างไร หรือมีปัญหาอะไร สามารถโพสถามไว้ในส่วน Comment ด้านล่าง หรือแวะไปถามที่ Designil Facebook Fanpage ได้นะครับ แอดมินฉีดยาแล้วไม่กัดแน่นอนฮะ
