10 ปลั๊กอิน PostCSS ที่ยอดเยี่ยมเพื่อทำให้คุณเป็นตัวช่วยสร้าง CSS

PostCSS เป็นเครื่องมือเอนกประสงค์ที่ทำให้มันเป็นไปได้ แปลงสไตล์ CSS ด้วยปลั๊กอิน JavaScript. ความยืดหยุ่นของมันอยู่ในแบบที่มันสร้างขึ้น.

ส่วนหลักของ PostCSS เป็นโมดูล Node.js ที่คุณสามารถติดตั้งด้วย npm และมีระบบนิเวศมากกว่า 200 ปลั๊กอินที่คุณสามารถเลือกใช้ในโครงการของคุณ.

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

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

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

1. Autoprefixer

Autoprefixer น่าจะเป็นปลั๊กอิน PostCss ที่เป็นที่รู้จักมากที่สุดเนื่องจากมันถูกใช้โดย บริษัท เทคโนโลยีที่มีชื่อเสียงเช่น Google, Twitter และ Shopify มัน เพิ่มคำนำหน้าผู้ขายในกฎ CSS ที่จำเป็น.

Autoprefixer ใช้ข้อมูลจากฉันสามารถใช้ วิธีนี้ไม่ได้ลงวันที่และสามารถใช้กฎล่าสุดได้เสมอ คุณสามารถตรวจสอบว่ามันทำงานอย่างไรบนเว็บไซต์ตัวอย่างของมัน.

2. CSSnext

CSSnext เป็น CSS transpiler ที่ ช่วยให้คุณใช้ไวยากรณ์ CSS ในอนาคตบนเว็บไซต์ปัจจุบัน. W3C มีกฎ CSS ใหม่มากมายที่เบราว์เซอร์ไม่ได้ใช้งานในปัจจุบัน แต่สามารถทำให้นักพัฒนาสามารถเขียน CSS ที่ซับซ้อนมากขึ้นได้เร็วขึ้นและง่ายขึ้น CSSnext ถูกสร้างเพื่อเชื่อมช่องว่างนี้.

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

3. PreCSS

PreCSS เป็นหนึ่งในปลั๊กอิน PstCSS ที่ทำงานเหมือนกับตัวประมวลผลล่วงหน้า CSS มันทำให้เป็นไปได้ ใช้ประโยชน์จากมาร์กอัปแบบ Sass ในไฟล์ sytlesheet ของคุณ.

ด้วยการแนะนำ PreCSS ให้กับเวิร์กโฟลว์ของคุณคุณสามารถใช้ตัวแปรได้, ถ้า-อื่น งบ, สำหรับ ลูปมิกซ์อิน, @extend และ @import กฎการซ้อนและคุณสมบัติอื่น ๆ ที่มีประโยชน์มากมายในโค้ด CSS ของคุณ เอกสาร Github ของ PreCSS ให้คำแนะนำโดยละเอียดเกี่ยวกับวิธีการใช้ให้เกิดประโยชน์สูงสุด.

4. StyleLint

StyleLint เป็น linter CSS ที่ทันสมัย พิสูจน์และตรวจสอบรหัส CSS ของคุณ. มันทำให้ง่ายต่อการหลีกเลี่ยงข้อผิดพลาดและผลักดันให้คุณปฏิบัติตามอนุสัญญาการเข้ารหัสที่สอดคล้องกัน.

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

5. สินทรัพย์ PostCSS

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

คุณต้องกำหนดโหลดพา ธ , พา ธ สัมพัทธ์และพา ธ พื้นฐานและปลั๊กอินจะค้นหาเนื้อหาที่คุณต้องการโดยอัตโนมัติ ตัวอย่างเช่นคุณสามารถเขียนรหัสต่อไปนี้หากคุณต้องการ URL ที่ถูกต้องของ foobar.jpg ภาพ:

 body background: resolve ('foobar.jpg'); 

สินทรัพย์ PostCSS ด้วย ดูแลแคชสินทรัพย์, ตามที่คุณสามารถตั้งค่า ป้องกันแคช ตัวแปรเป็นจริงหากคุณต้องการเปลี่ยนเส้นทาง URL โดยอัตโนมัติในกรณีที่มีการแก้ไขเนื้อหา ปลั๊กอินอัจฉริยะนี้ยังคำนวณขนาด (ความกว้างและความสูง) ของไฟล์รูปภาพหรือแม้กระทั่งปรับขนาดโดยใช้อัตราส่วนที่กำหนดไว้ล่วงหน้า.

6. CSSNano

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

ในบรรดาคุณสมบัติอื่น ๆ CSSNano สามารถรีบูตค่าดัชนี z, ลดตัวระบุที่กำหนดเอง, การแปลงความยาว, เวลาและค่าสีและการลบคำนำหน้าผู้ขายที่ล้าสมัย.

7. นักมายากลตัวอักษร

หากคุณเป็นแฟนตัวอักษรที่มีความซับซ้อนคุณจะต้องชอบ นักมายากลตัวอักษร ปลั๊กอิน PostCSS ความมหัศจรรย์ของ Font Magician อาศัยความสามารถของ สร้างทุกสิ่งที่จำเป็นโดยอัตโนมัติ @ font-face กฎระเบียบ.

วิธีการทำงานค่อนข้างตรงไปตรงมาคุณเพียงแค่เพิ่ม แบบอักษรตระกูล: "แบบอักษรที่ฉันชอบ"; CSS กฎกับองค์ประกอบ HTML และ Font Magician ทำผลงานที่เหลือ มันสามารถเพิ่ม Google แบบอักษรสำเนาภายในแบบอักษร Bootstrap วิชาการพิมพ์และยังสามารถโหลดแบบอักษรแบบอะซิงโครนัส นี่คือเว็บไซต์ตัวอย่างแบบอินเทอร์แอคทีฟ.

8. เขียน SVG

คุณเคยสงสัยหรือไม่ว่าการเขียน SVG นั้นยอดเยี่ยมแค่ไหนในไฟล์ CSS ของคุณ? ด้วยความช่วยเหลือของปลั๊กอินเขียน SVG PostCSS คุณสามารถบรรลุเป้าหมายนี้ได้อย่างง่ายดาย.

ตัวอย่างเช่นปลั๊กอินที่มีประโยชน์นี้ทำให้มันเป็นไปได้ เก็บพื้นหลังและไอคอน SVG ของคุณในไฟล์ CSS ของคุณ, และหลังจากนั้น เพิ่มลงในองค์ประกอบ HTML ที่เกี่ยวข้อง ด้วยวิธีดังต่อไปนี้:

 @svg square @ แก้ไข fill: var (- color, black); ความกว้าง: 100%; ความสูง: 100%; . ตัวอย่าง background: white svg (param square (- color # 00b1ff)) cover; 

9. กริดที่หายไป

ตารางที่หายไป เป็นปลั๊กอิน PostCSS ที่ยอดเยี่ยมที่ให้ความประทับใจแก่คุณ ระบบกริด CSS ไม่เพียงเท่านั้น ทำงานร่วมกับ CSS ธรรมดา แต่ยังมี ภาษาตัวประมวลผลล่วงหน้า (Sass, LESS, Stylus) มันใช้ Calc () ฟังก์ชั่น CSS เพื่อสร้างกริดที่สวยงามที่คุณสามารถใช้งานได้ง่ายโดยไม่ต้องใช้เวลามากเกินไปในการปรับแต่ง.

ตารางหายไปมีกฎที่ค่อนข้างตรงไปตรงมาตัวอย่างเช่นการกำหนดคอลัมน์ที่มีความกว้าง 25% นั้นไม่ได้ใช้อะไรมากกว่าโค้ดขนาดเล็กนี้:

 div คอลัมน์หาย: 1/4; 

10. PostCSS Sprites

PostCSS Sprite ปลั๊กอินทำให้ง่ายต่อการ สร้างภาพสไปรต์, กล่าวคือคอลเล็กชันภาพวางไว้ในไฟล์เดียว หลังจากตั้งค่าตัวเลือกไม่กี่ปลั๊กอินจะนำภาพจากไฟล์สไตล์ของคุณรวมเข้ากับสไปรต์แล้วอัปเดตการอ้างอิงรูปภาพทุกที่ที่จำเป็น.

คุณสามารถใช้ตัวกรองและกลุ่มต่าง ๆ เพื่อกำหนดรูปภาพที่คุณต้องการใส่ลงใน sprite และคุณสามารถกำหนดขนาดของภาพที่ส่งออกได้เช่นกัน.