0Pricing
CSS Academy · บทเรียน

PostCSS ทำอะไรและทำงานอย่างไร

ทำความเข้าใจ PostCSS ในฐานะเครื่องมือแปลง CSS ที่ขับเคลื่อนด้วยปลั๊กอิน JavaScript

PostCSS ทำอะไรและทำงานอย่างไร เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

PostCSS คืออะไร

PostCSS เป็นเครื่องมือแปลง CSS ไม่ใช่ส่วนขยายภาษาแบบ Sass แต่เป็นตัวประมวลผลที่ขับเคลื่อนด้วย JavaScript ซึ่งแปลง CSS มาตรฐานผ่านปลั๊กอิน สถาปัตยกรรมแบบปลั๊กอินทำให้สามารถประกอบการทำงานได้อย่างยืดหยุ่น

PostCSS เทียบกับ Sass

Sass เป็นตัวประมวลผลล่วงหน้าที่มีคุณสมบัติภาษาเป็นของตนเอง ส่วน PostCSS เป็นกระบวนการแปลงที่ทำงานกับ CSS มาตรฐาน ทั้งสองสามารถใช้ร่วมกันได้ โดย Sass จะคอมไพล์ก่อน แล้ว PostCSS จึงแปลงเพิ่มเติม

PostCSS ทำงานอย่างไร

PostCSS จะแยกวิเคราะห์ CSS ให้เป็น AST (แผนผังไวยากรณ์นามธรรม) จากนั้นปลั๊กอินจะแปลง AST และ PostCSS จะทำให้เป็น CSS กลับมาอีกครั้ง ปลั๊กอินสามารถเพิ่ม ลบ หรือแก้ไขโหนด CSS ใดก็ได้

การติดตั้ง PostCSS

โดยทั่วไปจะใช้งาน PostCSS ผ่าน Vite, webpack หรือ CLI ของ postcss:

npm install postcss postcss-cli autoprefixer cssnano

postcss.config.js

ไฟล์การกำหนดค่า PostCSS มาตรฐาน:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' })
  ]
};

PostCSS ในขั้นตอนกระบวนการสร้าง

ใน Vite มี PostCSS มาให้ในตัว ให้เพิ่มการกำหนดค่าใน vite.config.js หรือ postcss.config.js:

// vite.config.js
import autoprefixer from 'autoprefixer';

export default {
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
};

ประเภทโหนดของ PostCSS

AST ของ PostCSS มีประเภทโหนดหลักสี่ประเภท:

  • Root: ไฟล์ CSS ทั้งหมด
  • Rule: ตัวเลือกและบล็อกการประกาศ
  • Declaration: คู่คุณสมบัติ:ค่า
  • AtRule: กฎที่ขึ้นต้นด้วย @ (@media, @keyframes ฯลฯ)

ปลั๊กอิน PostCSS ยอดนิยม

ระบบนิเวศของ PostCSS มีปลั๊กอินหลายร้อยรายการ:

  • autoprefixer: เพิ่มคำนำหน้าของผู้ผลิต
  • cssnano: ลดขนาด CSS
  • postcss-preset-env: แปลง CSS สมัยใหม่ให้เข้ากันได้กับเบราว์เซอร์
  • postcss-import: แทรกคำสั่ง @import ลงในไฟล์
  • purgecss: ลบ CSS ที่ไม่ได้ใช้งาน

แผนผังแหล่งที่มา

PostCSS สามารถสร้างแผนผังแหล่งที่มา ซึ่งจับคู่ผลลัพธ์ที่ลดขนาดแล้วกลับไปยัง CSS ต้นฉบับ เพื่อให้แก้ไขข้อผิดพลาดใน DevTools ของเบราว์เซอร์ได้ง่ายขึ้น

PostCSS เทียบกับ CSS-in-JS

PostCSS แปลงไฟล์ CSS แบบคงที่ ส่วน CSS-in-JS จะสร้าง CSS แบบไดนามิกใน JavaScript ขณะทำงาน ทั้งสองเป็นเครื่องมือสำหรับกรณีใช้งานที่แตกต่างกัน โดย PostCSS เหมาะกับไฟล์สไตล์แบบดั้งเดิมมากกว่า ส่วน CSS-in-JS เหมาะกับสไตล์แบบไดนามิกที่จำกัดขอบเขตตามคอมโพเนนต์

การเรียกใช้ PostCSS ผ่าน CLI

ประมวลผลไฟล์ด้วย CLI:

npx postcss input.css -o output.css --use autoprefixer cssnano

ตรวจสอบอย่างรวดเร็ว

PostCSS ใช้สิ่งใดแทน CSS สำหรับการแปลง

สรุปทบทวน

PostCSS เป็นเครื่องมือแปลง CSS ที่ประมวลผล CSS ผ่านกระบวนการปลั๊กอิน โดยจะแยกวิเคราะห์ CSS เป็น AST ให้ปลั๊กอินแปลงข้อมูล แล้วทำให้กลับเป็น CSS ใช้สำหรับเพิ่มคำนำหน้าของผู้ผลิต ลดขนาด CSS รองรับคุณสมบัติ CSS สมัยใหม่ในเบราว์เซอร์ และการแปลงแบบกำหนดเอง นอกจากนี้ยังผสานการทำงานกับเครื่องมือสร้างอย่าง Vite และ webpack ได้โดยตรง

คำถามที่พบบ่อย

บทเรียน “PostCSS ทำอะไรและทำงานอย่างไร” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “PostCSS ทำอะไรและทำงานอย่างไร” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “PostCSS ทำอะไรและทำงานอย่างไร”

ทำความเข้าใจ PostCSS ในฐานะเครื่องมือแปลง CSS ที่ขับเคลื่อนด้วยปลั๊กอิน JavaScript คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “PostCSS ทำอะไรและทำงานอย่างไร” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. PostCSS ทำอะไรและทำงานอย่างไร
  2. Autoprefixer และ cssnano
  3. ปลั๊กอิน PostCSS แบบกำหนดเอง
  4. PostCSS ใน Vite และ Webpack
← กลับไปที่ CSS Academy