postcss less scss

PostCSS เครื่องมือเขียน CSS แบบใหม่ ที่มาแรงแซง LESS & Sass !!

10 minutes read
postcss less scss
Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email
วันนี้มี CSS Preprocessor ตัวใหม่ ชื่อว่า PostCSS มาแนะนำกันครับ ซึ่งกำลังได้รับความนิยมในต่างประเทศ ด้วยข้อดีต่าง ๆ ที่เกิดมาเพื่อแทน LESS / Sass โดยเฉพาะ

โดยผมเชื่อว่าตอนนี้หลาย ๆ คนน่าจะพอใจกับการใช้ CSS Preprocessor อย่าง LESS หรือ Sass/SCSS เข้ามาช่วยในการทำเว็บไซต์แล้ว อย่างไรก็ตาม ตราบใดที่คุณยังทำเว็บไซต์อยู่ย่อมต้องเจอกับเทคโนโลยีใหม่ ๆ ออกมาเรื่อย ๆ เพื่อให้ชีวิตดีขึ้นครับ เพราะฉะนั้นวันนี้จะมาแนะนำเครื่องมือใหม่ล่าสุด เรียกว่า PostCSS

แต่ก่อนอื่นจะขอเล่าก่อนละกันครับว่าจาก CSS เป็น LESS/Sass แล้วเป็น PostCSS เนี่ย มันเกิดอะไรขึ้นบ้าง

ทำไมต้องใช้ LESS/Sass แทนการเขียน CSS ธรรมดา

การเขียน CSS ในโปรเจคใหญ่ ๆ เรามักจะเจอปัญหาว่าได้ CSS 1 ไฟล์ยาว ๆ (เมื่อ 5 ปีที่แล้วแอดมินเคยตัด HTML/CSS 1 โปรเจค ใช้ CSS ไฟล์เดียว 2,000 บรรทัด) ซึ่งยากต่อการค้นหาว่าอะไรอยู่ตรงไหน เพราะไม่มีการจัดการที่เป็นระเบียบครับ

นอกจากนั้นยังไม่ฟีเจอร์หลาย ๆ อย่างที่มีในภาษาเขียนโปรแกรมอื่น เช่น การใช้ตัวแปร, การใช้ลูป ฯลฯ ที่ CSS ธรรมดาเราไม่สามารถทำได้

LESS/Sass จึงเกิดขึ้นครับ เป็นภาษาที่เขียนเสร็จแล้วต้องเอามา Compile เป็น CSS ธรรมดาจึงจะใช้ได้ (หรือที่เรียกว่า Preprocessor ครับ) โดยจะมีฟีเจอร์ต่าง ๆ ที่เราอยากได้ครบครัน เช่น การสร้างตัวแปร, การใช้ลูป, การแบ่งไฟล์เป็นระเบียบ ฯลฯ จนบางทีใช้ไม่หมดด้วยซ้ำ

ตัวอย่างการใช้ Sass:

$text_color: #ccc

h1, p {
  color: $text_color;
}

ซึ่งสามารถ Compile เป็น CSS ได้:

h1, p {
  color: #ccc;
}

จากตัวอย่างง่าย ๆ อันนี้เราอาจจะยังไม่เห็นประโยชน์ครับ แต่ถ้ามีการนำตัวแปรนี้ไปใช้เป็น 10 จุด แล้วจู่ ๆ ลูกค้าอยากให้เปลี่ยนโทนสีทั้งเว็บ เราก็แค่มาแก้ตัวแปรด้านบนตัวเดียวจบครับ ไม่ต้องไล่ค้นหาแล้วแก้ทั้ง 10 จุด

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

สำหรับคนที่ยังไม่เคยใช้ LESS / Sass มาก่อน แนะนำให้ลองใช้ก่อนครับผม สามารถอ่านวิธีใช้ง่าย ๆ ได้จากบทความด้านล่างเลย

ส่วนโปรแกรมสำหรับ Compile LESS / Sass เป็น CSS นั้น โปรแกรมฟรีที่ผมแนะนำจะเป็น Koala (Windows, Mac, Linux, Ubuntu) ครับ ดูฟีเจอร์ครบที่สุดแล้ว ส่วนถ้าโปรแกรมเสียเงินที่น่าสนใจก็มี Codekit (Mac) กับ Prepros (Windows, Mac, Linux) ครับ

แล้ว LESS / Sass ไม่ดีตรงไหน ทำไมต้องมีตัวใหม่

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

ตัวอย่างที่เห็นได้ง่าย ๆ คือ การพยายามซ้อน CSS หลาย ๆ ชั้นใน LESS / Sass แต่พอ Compile ออกมาแล้วโค้ดยาวยืดเป็นจำเป็น หรือการใช้ @extend แล้ว CSS Selector ออกมายาวเหยียด

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

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

…จึงเกิดมาเป็น PostCSS นั่นเองครับ

PostCSS คืออะไร

โลโก้ Post CSS
โลโก้ Post CSS… อย่าถามผมว่ามากจากอะไร เพราะเดาไม่ถูกเหมือนกันครับ T_T

PostCSS คือ JavaScript ที่จะเอา CSS ที่เราเขียนไปผ่านการใส่ฟีเจอร์ต่าง ๆ ตามต้องการ แค่เลือกลง Plugin ของ PostCSS ที่เราต้องการใช้งาน

เช่น ถ้าอยากรวม CSS หลายไฟล์เป็นไฟล์เดียว ก็ติดตั้ง PostCSS Import เข้ามาเสริม หรืออยากใส่ Vendor Prefix (-ms-, -webkit-, -moz- อะไรพวกนี้) อัตโนมัติ ก็ติดตั้ง PostCSS Autoprefixer เข้ามาเสริม

PostCSS จะมาแบบเปล่า ๆ ไม่มีปลั๊กอินเลย เราสามารถเลือกส่วนเสริม (Plugin) เพิ่มเองได้ทั้งหมดครับ หรืออยากเขียน Plugin มาใช้เองก็ยังได้

การใช้งาน PostCSS จำเป็นต้องรันผ่าน Build Tool เช่น Grunt , Gulp หรือแม้แต่ NPM (Node Package Manager) ธรรมดาก็ได้ครับ เพราะฉะนั้นอาจจะดูยุ่งยากสำหรับคนที่ใช้ Command Line ยังไม่ถนัดครับ ไม่แน่ว่าในอนาคตอาจจะมีโปรแกรมสำเร็จรูปแบบพวก Koala, Codekit มาให้ใช้ก็ได้

ส่วนใครที่ยังใช้พวก Build Tool ไม่เป็น ในบทความนี้จะมีสอนวิธีใช้ PostCSS แบบออนไลน์กันครับ อ่านได้ในหัวข้อ [ทดลองใช้] ด้านล่างเลย

ข้อดีของ PostCSS vs LESS/Sass

มาดูกันครับว่า PostCSS มันดีตรงไหน ทำไมถึงน่าหยิบมาใช้ครับ

  1. น้ำหนักเบา, Compile เร็วกว่า LESS, Sass (Libsass) 3-4 เท่า
  2. เลือกลง Plugin เองได้ ฟีเจอร์ไหนรันช้าก็ไม่ต้องลง ฟีเจอร์ไหนที่สร้างปัญหาเยอะ ๆ อย่าง @extend ก็ไม่ต้องลง
  3. LESS, Sass เพิ่มฟีเจอร์เองไม่ได้ (จริง ๆ Sass เพิ่มได้ แต่ต้องเขียน Ruby ซึ่งผมเคยลองแล้วลำบากมาก แถม Compile ช้าอีก) หรือถ้าอยากเพิ่มก็ต้องส่งเข้าตัว Core ที่ไม่รู้ว่าทีมงานจะรับมั้ย แต่ PostCSS เราแค่เขียน Plugin แยกออกมาใช้เองสบาย ๆ ไม่ต้องยุ่งกับ Core เลย
  4. ฟีเจอร์ CSS ใหม่ ๆ เช่น การใช้ตัวแปรแบบ Native ที่ยังไม่ได้รับการรับรองมาตรฐาน ถ้าเราอยากใช้งานก็แค่เรียกใช้ปลั๊กอินอย่าง CSSNext ที่ทำให้ทุกบราวเซอร์รองรับทันที แถมพอในอนาคตบราวเซอร์รองรับแล้ว เราก็ถอดปลั๊กอินตัวนี้ออกก็นำโค้ดไปใช้ได้ทันทีโดยไม่ต้อง Compile

PostCSS Plugin ที่น่าใช้

หลัก ๆ ฟีเจอร์ที่ผมใช้ตอนเขียน Sass คือ การใช้ตัวแปร, การเขียน Selector ซ้อนกัน (Nesting), การเขียน CSS แยกหลายไฟล์แล้วเอามารวมทีเดียว ซึ่ง PostCSS ก็มีปลั๊กอินออกมาให้ใช้ครบทั้งหมดแล้วครับ

  • PostCSS Simple Vars – ใส่ตัวแปรแบบ Sass
  • PostCSS Nested – เขียน Nested CSS
  • PostCSS Import – import ไฟล์เข้ามาได้
  • Autoprefixer – ใส่ Vendor Prefix อัตโนมัติ อันนี้หลาย ๆ คนอาจจะเคยใช้กันมาแล้วครับ เพราะ LESS / Sass ทำไม่ได้
  • PostCSS Neat – Grid System สำหรับ PostCSS
  • PostCSS Sprites – สร้าง Spritesheet แล้วเขียน CSS ให้เลย
  • PostCSS Opacity – ทำให้ IE8 รองรับ Opacity ดีมากกับเว็บไทยที่ยังต้องซัพพอร์ท IE เก่า ๆ อยู่ครับ T_T

ส่วนใครสนใจสร้าง Plugin มาใช้เอง สามารถอ่านได้ที่ วิธีการสร้าง Plugin สำหรับ PostCSS เลยครับ

[ทดลองใช้] วิธีใช้ PostCSS ใน Codepen

สำหรับใครที่ไม่ถนัดใช้ Build Tool หรืออยากลองใช้ก่อนว่ามันเป็นอย่างไร สามารถเข้าไปที่ Codepen ได้เลยคร้าบ

หน้าตาของเว็บไซต์ Codepen ครับ งานใครสวย ๆ จะถูกดึงมาแสดงหน้าแรก
หน้าตาของเว็บไซต์ Codepen ครับ งานใครสวย ๆ จะถูกดึงมาแสดงหน้าแรก

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

แน่นอนว่าเราก็ลองเขียนได้เช่นกันครับ ให้กดปุ่ม New Pen จะเป็นการลองเขียน HTML / CSS / JS จากหน้าเปล่า ๆ เลย แนะนำให้สมัครสมาชิกด้วยนะครับ เพราะเราจะย้อนมาดูโค้ดที่เคยเขียนได้

ทีนี้หลังจากได้กด New Pen ได้หน้าว่าง ๆ กันแล้ว มาลองใช้ PostCSS กันเลย

1) ในช่องเขียน CSS คลิกปุ่มรูปเกียร์ จะมีหน้าต่างโผล่ขึ้นมา

postcss-codepen-1

2) คลิกแท็บ CSS แล้วเลือก Dropdown: CSS Preprocessor กด PostCSS

postcss-codepen-2

3) คลิกปุ่ม Need an add-on? จะมีลิสต์ Plugin ต่าง ๆ ขึ้นมาให้เราเลือกใช้ได้เลย

4) ถ้าจะใช้ Plugin อันไหนก็ก็อปปี้โค้ดไปใส่ในช่องเขียน CSS เช่น @use cssnext; หรือ @use postcss-simple-vars;

postcss-codepen-3

5) ตัวอย่างการใช้ postcss-simple-vars สำหรับใช้ตัวแปรใน CSS แบบ Sass / SCSS

postcss-codepen-4

หรือถ้าใครอยากลองเล่นกับโค้ดจริง ๆ สามารถเล่นได้ที่นี่เลยครับ

1723

สุดท้าย เราควรเปลี่ยนจากโปรเจคเดิมที่ใช้ LESS/Sass มา PostCSS มั้ย

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

เพราะฉะนั้นถ้าโปรเจคที่เป็น LESS/Sass อยู่แล้วแนะนำให้ใช้ต่อไปครับ แล้วโปรเจคใหม่ที่เราอยากได้อะไรเบา ๆ ใช้ง่าย ๆ เขียนปลั๊กอินเพิ่มเองก็ได้ ค่อยเอา PostCSS มาใช้ครับผม

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

หรือว่าง ๆ แวะมาเยี่ยมเยียน Designil Facebook Page ได้คร้าบ มีบทความดี ๆ ของแจกฟรีสำหรับคนทำเว็บ อัพเดทใหม่ให้ทุกวัน




Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *