Stylus คือ ตัวประมวลผลโค้ดCSS ล่วงหน้า ซึ่งช่วยให้เราทำงานในโปรแกรมแก้ไขข้อความได้ง่ายขึ้น และด้านล่างนี้ฉันจะอธิบายเหตุผลสำหรับข้อความดังกล่าว
นี่คือสไตล์ชีตที่เรารู้จัก:
เนื้อความ {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; เส้นขอบรัศมี: 5px; }
และนี่จะเป็นไฟล์สไตล์ชีตเดียวกันกับที่สร้างด้วยStylus:
แบบอักษรของร่างกาย 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
แป้นพิมพ์อยู่ไหน? เครื่องหมายอัฒภาคและเครื่องหมายโคลอนหายไปไหนหมด? หายไปแล้ว ปากกาStylusจัดการเรื่องนั้นให้เราเอง
ถ้าคุณเพิ่งเริ่มต้นเรียนรู้CSSและHTML การใช้ Stylusอาจไม่ใช่ตัวเลือกที่ดีนัก เพราะคุณอาจลืมวิธีการใช้งานจริง ๆ แต่ถ้าคุณอยู่ในวงการนี้มาสักพักแล้วและต้องการประหยัดเวลาและความพยายามในการเขียนโค้ด... ก็ใช้ได้เลย
โปรแกรมเมอร์Pythonจะพบว่าStylusมีความคล้ายคลึงกับสิ่งที่พวกเขาคุ้นเคยเป็นอย่างมาก เพราะพวกเขาเพียงแค่ต้องจัดย่อหน้าให้ถูกต้องเท่านั้น ความมหัศจรรย์ก็จะเกิดขึ้น
การติดตั้ง
เพื่อให้Stylusทำงานได้ เราจำเป็นต้องติดตั้งNode.jsซึ่งอยู่ใน branch Community ดังนั้นเราจึงดำเนินการติดตั้งดังนี้:
$ sudo pacman -S nodejs
และต่อมาเราติดตั้ง Stylus วิธีดั้งเดิมคือ:
$ npm install -g stylus
ติดตั้งได้ดี แต่ไม่ได้ผลสำหรับฉันดังนั้นการติดตั้งจาก AUR จึงง่ายกว่ามาก:
$ yaourt -S nodejs-stylus
วิธีใช้ Stylus
โอเค ตอนนี้เรา ติดตั้ง Node.jsและStylusแล้ว เราจะใช้งานมันได้อย่างไร? ง่ายมาก สมมติว่าเรามีไดเร็กทอรีที่มีไฟล์ต่อไปนี้:
- ผบ. - index.html - style.css
สิ่งที่เราต้องทำคือสร้าง ไฟล์ style.stylซึ่งเป็นไฟล์ที่เราจะใช้ในการทำงาน ในไฟล์นั้น เราสามารถใส่โค้ดประมาณนี้ได้:
ตัวอักษรสีพื้นหลัง #ffff ขนาดตัวอักษร 12px ปุ่มสีแดงช่องว่างภายใน 10px
หากเราบันทึกหรือทำการเปลี่ยนแปลงใดๆ จะไม่มีอะไรเกิดขึ้น เพราะเรายังไม่ได้ "คอมไพล์" ไฟล์ หากต้องการคอมไพล์ไฟล์ เราต้องเปิดเทอร์มินัลในไดเร็กทอรีของเรา (ที่ ไฟล์ style.styl อยู่ ) แล้วรันคำสั่ง:
stylus -c style.styl
แต่ทุกครั้งที่เราบันทึก ไฟล์ style.stylเราจะต้องรันโค้ด แต่โชคดีที่ไม่จำเป็น เพราะถ้าเรารันคำสั่งเดิม แต่เพิ่ม พารามิเตอร์ -w (watch) เข้าไป จะเกิดเหตุการณ์ดังต่อไปนี้:
สไตลัส -c -w style.styl ดู /usr/lib/node_modules/stylus/lib/functions/index.styl คอมไพล์ style.css ดู style.styl คอมไพล์ style.css คอมไพล์ style.css
กล่าวคือไฟล์จะถูกคอมไพล์โดยอัตโนมัติผลลัพธ์จะเป็นอย่างไร
เนื้อหา {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
อย่างที่คุณเห็น โปรแกรมนี้ไม่เพียงแต่สร้าง โค้ด CSS ของเราเท่านั้น แต่ยังลบช่องว่างที่ไม่จำเป็นออก ทำให้ไฟล์สไตล์ชีตของเรามีขนาดเล็กลงด้วย
ไม่เพียงเท่านั้นStylusยังช่วยให้เราแปลงไฟล์ CSS ให้เป็นรูปแบบของมันได้ และวิธีการใช้งานไวยากรณ์ของมันก็หลากหลายอย่างเหลือเชื่อ และนี่เป็นเพียงตัวอย่างเล็กน้อยเท่านั้น ดังนั้น หากคุณสนใจ ผมขอแนะนำให้คุณศึกษาเพิ่มเติมเกี่ยวกับStylus