PostCSS: วันที่เล่นใหม่ของ Sass

เมื่อเร็ว ๆ นี้ PostCSS เป็นเครื่องมือในการสร้างส่วนหน้าของการพัฒนาเว็บ

PostCSS ได้รับการพัฒนาโดย Andrey Sitnik ผู้สร้าง Autoprefixer เป็นแพ็คเกจ Node.js ที่พัฒนาขึ้นเพื่อเป็นเครื่องมือในการแปลง CSS ทั้งหมดของคุณโดยใช้ JavaScript ดังนั้นจึงสร้างเวลาในการสร้างได้เร็วกว่าโปรเซสเซอร์อื่น ๆ

แม้จะดูเหมือนชื่อของมันอย่างบอกเป็นนัย แต่ก็ไม่ใช่ตัวประมวลผลภายหลัง (และไม่ใช่ตัวประมวลผลล่วงหน้า) แต่เป็นทรานสปิลเลอร์ที่จะเปลี่ยนรูปแบบเฉพาะของ PostCSS (หรือเฉพาะปลั๊กอิน PostCSS เพื่อให้แม่นยำยิ่งขึ้น) ไวยากรณ์เป็น วานิลลาซีเอสเอส

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

PostCSS ไม่ได้แทนที่โปรเซสเซอร์ CSS อื่นๆ ให้มองว่าเป็นเครื่องมืออื่นที่อาจมีประโยชน์เมื่อจำเป็น ซึ่งเป็นอีกเครื่องมือหนึ่งนอกเหนือจากชุดเครื่องมือของคุณ

การใช้ PostCSS เพิ่งเริ่มเพิ่มขึ้นอย่างทวีคูณ โดยปัจจุบันมีการใช้โดยธุรกิจอุตสาหกรรมเทคโนโลยีที่ใหญ่ที่สุดบางแห่ง เช่น Twitter, JetBrains และ Wikipedia การนำไปใช้อย่างแพร่หลายและความสำเร็จนั้นส่วนใหญ่มาจากความเป็นโมดูล

ปลั๊กอิน ปลั๊กอิน ปลั๊กอิน

PostCSS เป็นข้อมูลเกี่ยวกับปลั๊กอินทั้งหมด

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

ณ วันที่เขียนโพสต์นี้ PostCSS มีพื้นที่เก็บข้อมูลของปลั๊กอินมากกว่า 200 ปลั๊กอิน ซึ่งแต่ละปลั๊กอินมีหน้าที่รับผิดชอบงานที่แตกต่างกัน ในที่เก็บ GitHub ของ PostCSS ปลั๊กอินจะถูกจัดหมวดหมู่ตาม "แก้ปัญหา CSS ทั่วโลก" "ใช้ CSS ในอนาคตตั้งแต่วันนี้" "ความสามารถในการอ่าน CSS ที่ดีขึ้น" "รูปภาพและแบบอักษร" "Linters" และ "อื่นๆ"

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

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

ไม่ใช่ว่าปลั๊กอิน PostCSS ทั้งหมดจะแหวกแนวนัก บางตัวก็ให้ความสามารถที่อาจมาพร้อมกับโปรเซสเซอร์อื่นๆ ที่แกะกล่อง ใช้ parent selector เช่น ด้วย Sass คุณสามารถเริ่มใช้งานได้ทันทีเมื่อคุณติดตั้ง Sass ด้วย PostCSS คุณต้องใช้ postcss-nested-ancestors เช่นเดียวกับการ extends หรือ mixins

ข้อดีของการใช้ PostCSS และปลั๊กอินคืออะไร คำตอบนั้นง่าย - คุณสามารถเลือกการต่อสู้ของคุณเองได้ หากคุณรู้สึกว่าส่วนเดียวของ Sass ที่คุณเคยใช้คือ parent selector คุณสามารถประหยัดความเครียดจากการติดตั้งไลบรารี Sass ในสภาพแวดล้อมของคุณเพื่อคอมไพล์ CSS และเพิ่มความเร็วให้กับกระบวนการโดยใช้ เฉพาะ PostCSS และ postcss-nested-ancestors

นั่นเป็น เพียง ตัวอย่างกรณีการใช้งานสำหรับ PostCSS แต่เมื่อคุณเริ่มตรวจสอบด้วยตัวเอง คุณจะทราบกรณีการใช้งานอื่นๆ มากมายสำหรับมันอย่างไม่ต้องสงสัย

การใช้ PostCSS พื้นฐาน

อันดับแรก เรามาพูดถึงพื้นฐาน PostCSS กันก่อน แล้วมาดูกันว่ามันใช้งานอย่างไร แม้ว่า PostCSS จะมีประสิทธิภาพอย่างมากเมื่อใช้กับ task runner เช่น Gulp หรือ Grunt แต่ก็สามารถใช้ได้โดยตรงจากบรรทัดคำสั่งโดยใช้ postcss-cli

ลองพิจารณากรณีการใช้งานตัวอย่างง่ายๆ สมมติว่าเราต้องการใช้ปลั๊กอิน postcss-color-rgba-fallback เพื่อเพิ่มค่า HEX ทางเลือกให้กับสีที่จัดรูปแบบ RGBA ทั้งหมดของเรา

เมื่อเราติดตั้ง NPM postcss , postcss-cli และ postcss-color-rgba-fallback แล้ว เราจำเป็นต้องเรียกใช้คำสั่งต่อไปนี้:

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

ด้วยคำแนะนำนี้ เรากำลังบอกให้ PostCSS ใช้ postcss-color-rgba-fallback ประมวลผลสิ่งที่ CSS อยู่ภายใน src/css/all.css และส่งออกไปยัง dist/css/all.css

ตกลงที่เป็นเรื่องง่าย ทีนี้มาดูตัวอย่างที่ซับซ้อนกว่านี้กัน

การใช้ PostCSS ร่วมกับ Task-runners และ Sass

PostCSS สามารถรวมเข้ากับเวิร์กโฟลว์ของคุณได้อย่างง่ายดาย ดังที่ได้กล่าวไปแล้ว มันรวมเข้ากับตัวรันงานอย่าง Grunt, Gulp หรือ Webpack ได้อย่างสมบูรณ์แบบ และยังสามารถใช้กับสคริปต์ NPM ได้อีกด้วย ตัวอย่างของการใช้ PostCSS ร่วมกับ Sass และ Gulp นั้นง่ายพอๆ กับข้อมูลโค้ดต่อไปนี้:

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

มาแยกโครงสร้างตัวอย่างโค้ดด้านบนกัน

มันเก็บการอ้างอิงถึงโมดูลที่จำเป็นทั้งหมด (อึก, ติดต่อ CSS, Sass, PostCSS และ CSSNext) ในชุดของตัวแปร

จากนั้นจะลงทะเบียนงาน Gulp ใหม่ที่เรียกว่า stylesheets งานนี้คอยดูไฟล์ที่อยู่ใน ./src/css/ ที่มีนามสกุล .scss ./src/css/ ไม่ว่าจะลึกแค่ไหนในโครงสร้างไดเรกทอรีย่อยก็ตาม) Sass จะคอมไพล์ไฟล์เหล่านั้น และต่อไฟล์ทั้งหมดให้เป็นไฟล์ all.css ไฟล์เดียว

เมื่อไฟล์ all.css ถูกสร้างขึ้น ไฟล์นั้นจะถูกส่งไปยัง PostCSS เพื่อแปลงรหัสที่เกี่ยวข้องกับ PostCSS (และปลั๊กอิน) ทั้งหมดไปยัง CSS จริง จากนั้นไฟล์ที่ได้จะอยู่ใน ./ ./dist/css /css

ตกลง ดังนั้นการตั้งค่า PostCSS ด้วย task runner และ preprocessor นั้นยอดเยี่ยม แต่นั่นเพียงพอหรือไม่ที่จะปรับการทำงานกับ PostCSS ตั้งแต่แรก

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

วิธีการนี้ยังช่วยให้เราใช้คุณสมบัติที่ไม่มีคำนำหน้าและนำหน้าตามค่าที่ดึงมาจาก API เช่นเดียวกับคุณสมบัติที่ฉันใช้ได้ ซึ่งเป็นสิ่งที่แทบจะไม่สามารถทำได้โดยใช้ Sass เพียงอย่างเดียว สิ่งนี้มีประโยชน์มากหากเราพยายามหลีกเลี่ยง มิกซ์อิน ที่ซับซ้อนซึ่งอาจไม่ใช่วิธีที่ดีที่สุดในการนำหน้าโค้ด

วิธีที่พบบ่อยที่สุดในการรวม PostCSS เข้ากับเวิร์กโฟลว์ปัจจุบันของคุณ หากคุณใช้ Sass อยู่แล้ว ก็คือการส่งเอาต์พุตที่คอมไพล์แล้วของไฟล์ .scss หรือ . .sass ของคุณผ่าน PostCSS และปลั๊กอิน สิ่งนี้จะสร้างไฟล์ CSS อื่นที่มีเอาต์พุตของทั้ง Sass และ PostCSS

หากคุณกำลังใช้ task runner การใช้ PostCSS นั้นง่ายพอๆ กับการเพิ่มไปยังไปป์ไลน์ของงานที่คุณมีอยู่ ทันทีหลังจากรวบรวมไฟล์ .scss หรือ . .sass ของคุณ (หรือไฟล์ของตัวประมวลผลล่วงหน้าที่คุณเลือก)

PostCSS ทำงานได้ดีกับผู้อื่น และสามารถช่วยบรรเทาปัญหาหลักๆ ที่เราในฐานะนักพัฒนาพบเจอได้ทุกวัน

มาดูตัวอย่างอื่นของ PostCSS (และปลั๊กอินสองสามตัวเช่น CSSNext และ Autoprefixer) และ Sass ที่ทำงานร่วมกัน คุณสามารถมีรหัสต่อไปนี้:

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

ตัวอย่างโค้ดนี้มีวานิลา CSS และไวยากรณ์ Sass คุณสมบัติที่กำหนดเอง ณ วันที่เขียนบทความนี้ ยังคงอยู่ในสถานะ Candidate Recommendation (CR) และนี่คือจุดเริ่มต้นของการดำเนินการปลั๊กอิน CSSNext สำหรับ PostCSS

ปลั๊กอินนี้จะรับผิดชอบในการเปลี่ยนคุณสมบัติต่างๆ เช่น คุณสมบัติที่กำหนดเองเป็น CSS ในปัจจุบัน สิ่งที่คล้ายกันจะเกิดขึ้นกับคุณสมบัติการ transform ซึ่งจะมีคำนำหน้าอัตโนมัติโดยปลั๊กอินคำนำหน้าอัตโนมัติ รหัสที่เขียนไว้ก่อนหน้านี้จะส่งผลดังนี้:

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

การเขียนปลั๊กอินสำหรับ PostCSS

ดังที่ได้กล่าวไว้ก่อนหน้านี้ คุณลักษณะที่น่าสนใจของ PostCSS คือระดับของการปรับแต่งที่อนุญาต ต้องขอบคุณความเปิดกว้างของมัน การเขียนปลั๊กอินแบบกำหนดเองสำหรับ PostCSS ของคุณเองเพื่อให้ครอบคลุมความต้องการเฉพาะของคุณจึงเป็นงานที่ค่อนข้างง่าย หากคุณสะดวกที่จะเขียน JavaScript

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

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

ดังนั้น ในการสร้างปลั๊กอิน PostCSS เราจำเป็นต้องสร้างโมดูล Node.js (โดยปกติ โฟลเดอร์ปลั๊กอิน PostCSS ใน node_modules/ จะถูกนำหน้าด้วยคำนำหน้าเช่น “postcss-” ซึ่งทำให้ชัดเจนว่าเป็นโมดูลที่ขึ้นอยู่กับ PostCSS)

สำหรับผู้เริ่มต้น ในไฟล์ index.js ของโมดูลปลั๊กอินใหม่ เราจำเป็นต้องรวมโค้ดต่อไปนี้ ซึ่งจะเป็นตัวห่อหุ้มโค้ดประมวลผลของปลั๊กอิน:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

เราตั้งชื่อปลั๊กอิน replacecolors ปลั๊กอินจะค้นหาคีย์เวิร์ด deepBlackText และแทนที่ด้วยค่าสี #2e2e2e HEX:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

ตัวอย่างก่อนหน้าเพิ่งทำสิ่งต่อไปนี้:

1. การใช้ walkRules() เป็นการวนซ้ำกฎ CSS ทั้งหมดที่อยู่ในไฟล์ .css ปัจจุบันที่เรากำลังดำเนินการอยู่
2. การใช้ walkDecls() เป็นการทำซ้ำผ่านการประกาศ CSS ทั้งหมดที่อยู่ในไฟล์ .css ปัจจุบัน
3. จากนั้นจะเก็บการประกาศไว้ในตัวแปรการประกาศและตรวจสอบว่ามีสตริง deepBlackText อยู่ในนั้นหรือไม่ ถ้าเป็น จะเป็นการแทนที่การประกาศทั้งหมดสำหรับการประกาศ CSS ต่อไปนี้: color: #2e2e2e; .

เมื่อปลั๊กอินพร้อม เราก็สามารถใช้งานได้โดยตรงจากบรรทัดคำสั่ง:

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

หรือตัวอย่างเช่น โหลดใน Guplfile ดังนี้:

 var replacecolors = require('postcss-replacecolors');

ฉันควรละทิ้งตัวประมวลผล CSS ปัจจุบันของฉันเพื่อใช้ PostCSS หรือไม่

นั่นขึ้นอยู่กับสิ่งที่คุณกำลังมองหา

เป็นเรื่องปกติที่จะเห็นทั้ง Sass และ PostCSS ใช้พร้อมกัน เนื่องจากผู้มาใหม่จะใช้งานเครื่องมือบางอย่างที่ตัวประมวลผลก่อน/หลังมีให้พร้อมได้ง่ายขึ้น พร้อมด้วยคุณลักษณะของปลั๊กอิน PostCSS การใช้แบบเคียงข้างกันยังสามารถหลีกเลี่ยงการสร้างเวิร์กโฟลว์ที่กำหนดไว้ล่วงหน้าใหม่ด้วยเครื่องมือที่ค่อนข้างใหม่ และมีแนวโน้มมากที่สุดที่ไม่รู้จัก ในขณะที่ให้วิธีรักษาการใช้งานที่ขึ้นอยู่กับโปรเซสเซอร์ในปัจจุบัน (เช่น Sass mixins , extends , parent selector , placeholder selectors , และอื่นๆ)

ให้โอกาส PostCSS

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

พลังของ PostCSS ส่วนใหญ่อยู่ในปลั๊กอิน หากสิ่งที่คุณกำลังมองหาคือโมดูลาร์ ความยืดหยุ่น และความหลากหลาย นี่คือเครื่องมือที่เหมาะสมสำหรับงานนี้

หากคุณกำลังใช้ task runners หรือ bundlers การเพิ่ม PostCSS ให้กับโฟลว์ปัจจุบันของคุณมักจะเป็นเรื่องง่าย ตรวจสอบคู่มือการติดตั้งและการใช้งาน และคุณอาจพบวิธีง่ายๆ ในการผสานรวมกับเครื่องมือที่คุณใช้อยู่แล้ว

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