• โฮมเพจ
  • บทความ
  • แนะนำ
  • เครื่องมือ CSS 55+: ตัวประมวลผลล่วงหน้า ปลั๊กอิน ตัวแก้ไข & ตัวสร้างการไล่ระดับสี

เครื่องมือ CSS 55+: ตัวประมวลผลล่วงหน้า ปลั๊กอิน ตัวแก้ไข & ตัวสร้างการไล่ระดับสี

เผยแพร่แล้ว: 2016-12-30

CSS ย่อมาจาก Cascading Stylesheet CSS เป็นภาษามาร์กอัปที่ใช้กับ HTML เพื่อออกแบบหน้าเว็บ หน้า HTML ไม่ได้ดูดี แต่ด้วย CSS คุณสามารถทำให้หน้าดูสวยงามและน่าสนใจได้ หากคุณกำลังวางแผนที่จะเรียนรู้การพัฒนาธีม WordPress ก่อนอื่น คุณควรเรียนรู้ HTML และ CSS

บทความเพิ่มเติมจาก ชุดเครื่องมือพัฒนาธีม

  • หน้าหลักชุดเครื่องมือพัฒนา WordPress
  • ดาวน์โหลดหนังสือฟรี 15 เล่มเพื่อโท HTML, CSS, JavaScript, jQuery, Bootstrap และ WordPress
  • รายการที่ดีที่สุดของ Chrome ที่ดีที่สุด 30+ ส่วนขยาย Firefox บทช่วยสอน & เครื่องมือสำหรับนักพัฒนาเว็บ
  • 38 หลักสูตรวิดีโอฟรีเพื่อเรียนรู้ HTML, CSS, PHP, jQuery, JavaScript, Git และอื่น ๆ

ในบทความนี้ เราจะแบ่งปันเครื่องมือ CSS ที่ดีที่สุดสำหรับนักพัฒนา WordPress ระดับเริ่มต้นและขั้นสูง หากคุณเป็นมือใหม่และไม่รู้อะไรเลยเกี่ยวกับ HTML หรือ CSS คุณสามารถดาวน์โหลด 38 หลักสูตรฟรีและ 15 ebook ฟรีเพื่อเรียนรู้ HTML, CSS และภาษาการเขียนโปรแกรมอื่นๆ ตั้งแต่เริ่มต้น

12 เครื่องมือ CSS: ตัวประมวลผลล่วงหน้า CSS แอพและส่วนเสริม

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

  2. SASS อ้างว่าเป็นภาษาส่วนขยาย CSS ระดับมืออาชีพที่เติบโตเต็มที่ เสถียร และทรงพลังที่สุดในโลก SASS นั้นมีอายุเกือบทศวรรษแล้ว และมีเฟรมเวิร์กมากมายที่สร้างด้วย Sass อย่างไม่สิ้นสุด รวมถึง Compass, Bourbon และ Susy เป็นต้น

  3. Stylus คือ CSS Preprocessors ซึ่งขยายฟังก์ชันการทำงานของ CSS ปกติ นำเสนอการทำงานเชิงตรรกะที่ทรงพลัง ความสามารถในการทำงานผ่าน Node.js / JavaScript (ไม่มี Ruby) ความสามารถในการทำงานโดยเป็นส่วนหนึ่งของการตั้งค่า Node.js ไวยากรณ์ที่สะอาดและเรียบง่าย แต่ยืดหยุ่น

  4. CodeKit ($ 32) เป็นแอพที่ทรงพลังและเป็นที่นิยมสำหรับผู้ใช้ MAC CodeKit สามารถคอมไพล์ Less, Sass, Stylus, CoffeeScript, typescript, Jade, Haml, Slim, Markdown & Javascript เสนอเบราว์เซอร์รีเฟรชอัตโนมัติและ Bower ในตัว คุณสามารถติดตั้งส่วนประกอบมากกว่า 6,000 รายการด้วยการคลิกเพียงครั้งเดียว รวมถึง Bootstrap, jQuery, Modernizr, Zurb Foundation แม้แต่ WordPress

  5. PrePros ($ 29) : Prepros เป็นเครื่องมือระดับพรีเมียมในการรวบรวม LESS, Sass, Compass, Stylus, Jade และอีกมากมายด้วยคำนำหน้า CSS อัตโนมัติ ซึ่งมาพร้อมกับเซิร์ฟเวอร์ในตัวสำหรับการทดสอบข้ามเบราว์เซอร์ สามารถใช้ได้กับ Windows, Mac OS X และ Linux มี CSS Prefixing อัตโนมัติ, Automatic Browser Refresh, File Minification, Image Optimization, Built-in Server และอื่นๆ อีกมากมาย

  6. Emmet : ปลั๊กอินฟรีสำหรับโปรแกรมแก้ไขโค้ดต่างๆ เพื่อเขียนโค้ดอย่างรวดเร็วและง่ายดาย Emmet เขียนด้วย JavaScript ล้วนๆ และทำงานบนแพลตฟอร์มต่างๆ: เว็บเบราว์เซอร์, Node.js, Microsoft WSH และ Mozilla Rhino

  7. Fire.App : เครื่องมือเหมือน CodeKit สำหรับ Windows คือ fire.app (ทำงานบน Linux และ Mac ด้วย) รัก Sass / Compass แต่เกลียดอินเทอร์เฟซบรรทัดคำสั่ง? Fire.app รองรับ Sass/Compass ระดับเฟิร์สคลาส เช่นเดียวกับ Compass.app ของเรา ไม่มีคำนำหน้า CSS ของผู้ขายและรูปภาพเทพดาที่ประดิษฐ์ด้วยมือ! Fire.app ทำงานบนแพลตฟอร์ม Mac, Linux และ Windows ขั้นตอนการติดตั้งทำได้ง่ายเพียงแค่คลิกและลาก

  8. Snippets เป็นโปรแกรมฟรีสำหรับจัดการโค้ดของคุณ ช่วยให้คุณจัดระเบียบและนำข้อมูลโค้ดไปใช้ซ้ำในโปรเจ็กต์ต่างๆ แชร์ข้อมูลโค้ดกับสาธารณะและกับทีมของคุณ สามารถใช้ได้กับ Mac และ Windows

  9. Koala App เป็นแอปพลิเคชัน GUI สำหรับการรวบรวม Less, Sass, Compass และ CoffeeScript เพื่อช่วยให้นักพัฒนาเว็บใช้งานได้อย่างมีประสิทธิภาพมากขึ้น Koala สามารถทำงานบน windows, Linux และ Mac

  10. การแก้ไข LiveReload CSS และการเปลี่ยนแปลงรูปภาพมีผลใช้งานจริง CoffeeScript, SASS, LESS และอื่น ๆ ใช้งานได้ LiveReload ตรวจสอบการเปลี่ยนแปลงในระบบไฟล์ ทันทีที่คุณบันทึกไฟล์ ไฟล์จะถูกประมวลผลล่วงหน้าตามต้องการ และเบราว์เซอร์จะรีเฟรช

  11. แอพ Scout เป็นแอพ ข้ามแพลตฟอร์มที่มอบพลังของ Sass & Compass ให้อยู่ในมือของนักออกแบบเว็บไซต์ Scout ช่วยให้เวิร์กโฟลว์ CSS ของคุณรวดเร็วโดยมอบการควบคุม การเพิ่มประสิทธิภาพ และการจัดระเบียบที่มากขึ้น

  12. Crunch 2 Crunch ให้คุณเขียน Less, Sass, CoffeeScript, Markdown* แล้วบันทึก CSS, JavaScript และ HTML โดยอัตโนมัติหลังจากที่คุณทำการเปลี่ยนแปลง ต้องการเขียน CSS ธรรมดาหรือไม่? XML? ฮาสเคล? MUSHCode? Crunch ให้คุณทำแบบนั้นได้เช่นกัน Crunch 2 เป็นโปรแกรมแก้ไขที่ให้คุณทำสิ่งที่ต้องการได้ เพราะ Crunch รักคุณ

10 WordPress ปลั๊กอิน CSS ที่กำหนดเอง

หากคุณต้องการปรับแต่ง CSS ใน WordPress คุณสามารถใช้ปลั๊กอินฟรีจำนวนมากหรือคุณสมบัติแก้ไข CSS ในตัวที่อยู่ภายใต้เครื่องมือปรับแต่งตั้งแต่ WordPress 4.7 เราได้รวบรวมรายชื่อปลั๊กอิน CSS ฟรี 10 รายการซึ่งช่วยให้คุณแก้ไขและบันทึก CSS ที่กำหนดเองได้อย่างง่ายดาย

คุณยังสามารถอ่านบทช่วยสอนนี้เพื่อเรียนรู้วิธีแก้ไข CSS ในธีม WordPress โดยใช้เครื่องมือสำหรับนักพัฒนา Chrome และวิธีเพิ่มลูกศรในเมนู WordPress ด้วย CSS โดยไม่ต้องใช้ jQuery หรือ PHP

เครื่องกำเนิดการไล่ระดับสี 15 CSS

  1. ตัวแก้ไขการไล่ระดับสี colorzilla
  2. ตัวแก้ไขการไล่ระดับสี cssmatic
  3. เครื่องกำเนิดการไล่ระดับสี Angrytools
  4. gradientgenerator.com/
  5. css3generator.com/
  6. เครื่องกำเนิดการไล่ระดับสี cssportal
  7. uigradients.com: พร้อมใช้การไล่ระดับสีที่สวยงาม
  8. css3factory การไล่ระดับสีเชิงเส้น
  9. เครื่องกำเนิดการไล่ระดับสี gradcolor
  10. เพอร์บัง RGB ไล่ระดับ
  11. เครื่องกำเนิดการไล่ระดับสี paintbycode
  12. เครื่องกำเนิดการไล่ระดับสี virtuosoft
  13. westciv รัศมีการไล่ระดับสี
  14. westciv การไล่ระดับสีเชิงเส้น
  15. ตัวสร้างการไล่ระดับสี CSS3

10 โปรแกรมแก้ไข CSS ออนไลน์ฟรี

  1. ตัวแก้ไข CSS ออนไลน์โดย CSS Portal
  2. CSSdeck แล็บ
  3. โปรแกรมแก้ไข HTML และ CSS แบบเรียลไทม์ของ ScratchPad
  4. ตัวสร้างโค้ด CSS3 ออนไลน์โดย EnjoyCSS
  5. cssdesk
  6. jsfiddle : ทดสอบ JavaScript, CSS, HTML หรือ CoffeeScript ออนไลน์
  7. CSSmate Editor
  8. CSS Beautify และ Minify
  9. liveweave HTML5, CSS3 & JavaScript สนามเด็กเล่น
  10. SelfCSS – โปรแกรมแก้ไข CSS แบบ WYSIWYG

10 ส่วนขยายของ Chrome เพื่อแก้ไข CSS

  1. CSSViewer
  2. Stylebot
  3. ผู้ใช้ CSS
  4. ตัวแก้ไข CSS แบบสด
  5. เครื่องมือสำหรับนักพัฒนา บันทึกอัตโนมัติ
  6. บันทึก CSS
  7. ตัวทดสอบการออกแบบเว็บที่ตอบสนอง
  8. สารวัตรตอบสนอง
  9. ตัวปรับขนาดวิวพอร์ต
  10. ปรับขนาดแท็บ – เค้าโครงหน้าจอแยก

คำพูดสุดท้าย

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

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

หมายเหตุ : บทความนี้เผยแพร่ครั้งแรกที่ createwptheme.com เราได้เผยแพร่ซ้ำที่นี่โดยได้รับอนุญาต