9 ห้องสมุด Mixin สำหรับนักออกแบบ Sass ควรได้รับ

ถ้าคุณใช้ Sass ในขั้นตอนการพัฒนาของคุณคุณรู้ถึงความสำคัญของมิกซ์อิน เมื่อคุณเห็นบางสิ่งที่เขียน ซ้ำ ๆ และน่าเบื่อใน CSS, นั่นคือสิ่งที่ mixins สามารถช่วยคุณป้องกันการทำงานซ้ำ ๆ มิกซ์อินมีการประกาศ CSS ที่คุณสามารถนำมาใช้ซ้ำได้ทั่วทั้งไซต์ของคุณ.

นักพัฒนามีหลายสูตรที่จะช่วยคุณเมื่อทำงานกับ Sass ในการพัฒนาของคุณ ส่วนใหญ่ครอบคลุมสิ่งต่าง ๆ ที่มักเกิดซ้ำ ๆ ใน CSS จาก ปรับตัวในหลายเบราว์เซอร์ ไปยัง การสร้างปุ่มภาพเคลื่อนไหวและเอฟเฟกต์การเปลี่ยนแปลง, ค้นหาสิ่งนี้และอีกมากมายใน 11 ไลบรารี mixin ต่อไปนี้ที่คุณควรได้รับจากการพัฒนา Sass ของคุณ.

1. บูร์บอง

Bourbon เป็นไลบรารี Sass ที่มีมิกซ์อินฟังก์ชันและส่วนเสริมที่ช่วยให้คุณสร้างสไตล์ชีทสำหรับการใช้งานข้ามเบราว์เซอร์ได้ง่ายขึ้น สำหรับฉันนี่คือ Sass mixin ที่ยอดเยี่ยมที่สุด มันมีเกือบทุกอย่างที่คุณต้องการในการออกแบบเว็บไซต์ของคุณในขณะที่ทำให้สไตล์ชีตของคุณมีน้ำหนักเบา.

ตรวจสอบเอกสารที่สมบูรณ์เพื่อใช้มิกซ์อินและฟังก์ชั่นแต่ละอย่างที่มี.

2. Sass CSS3 Mixins

Sass CSS3 Mixins นำเสนอมิกซ์อินที่ใช้ได้กับเบราว์เซอร์ที่แตกต่างกัน คุณจะพบกับมิกซ์อินฝึกหัดที่ดีที่สุดที่นี่เช่นพื้นหลังเส้นขอบกล่องคอลัมน์แบบอักษรหน้าแปลงการเปลี่ยนผ่านและภาพเคลื่อนไหว ก็เพียงพอสำหรับความต้องการในการออกแบบของคุณ ที่จะใช้นำเข้า CSS3-mixins.scss และเรียกมิกซ์อินในคลาส CSS ของคุณ.

ดาวน์โหลด mixin นี้ที่นี่.

3. CssOwl

CssOwl จัดเตรียมมิกซ์อินที่มีประโยชน์เพื่อกำหนดตำแหน่งขององค์ประกอบ (สัมพัทธ์หรือสัมบูรณ์) และเพิ่มเนื้อหาด้วยตัวเลือกหลอก ( :หลังจาก และ :ก่อน) นอกจากนี้ยังช่วยเมื่อคุณต้องการสร้างองค์ประกอบสไปรต์: มิกซ์อินให้ความยืดหยุ่นในการกำหนดตำแหน่งภาพในสไปรต์ของคุณ นอกจาก Sass แล้วห้องสมุด CssOwl mixin ยังมีให้บริการสำหรับ LESS และ Stylus.

4. เบรกพอยต์ Sass

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

5. ขยะ

Scut มีชุดมิกซ์ Sass ที่ใช้ซ้ำได้ตัวยึดฟังก์ชันและตัวแปรที่ช่วยให้คุณใช้รูปแบบรหัสสไตล์ทั่วไปได้อย่างง่ายดาย มันมีรหัสวิธีปฏิบัติที่ดีที่สุดในการสร้างสิ่งต่าง ๆ บนเว็บเช่นเลย์เอาต์ของหน้าเว็บและในรูปแบบตัวอักษร คุณสามารถลดการทำซ้ำเมื่อเขียนรหัสโดยใช้รหัสซ้ำบ่อยขึ้น ดังนั้นช่วยให้คุณมีระเบียบมากขึ้นในกระบวนการ.

6. หญ้าฝรั่น

ด้วย Saffron คุณสามารถเพิ่มภาพเคลื่อนไหวและการเปลี่ยน CSS3 ได้อย่างง่ายดาย มีภาพเคลื่อนไหวและช่วงการเปลี่ยนภาพจำนวนโหลที่มีให้ซึ่งรวมถึงการเลือนเข้า / ออกเลื่อนเข้า / ออกเพิ่มขึ้น / เข้าออกเช่นเดียวกับเอฟเฟกต์อื่น ๆ เช่นการสั่นไหวส่ายไปส่ายกลับและอื่น ๆ ในการใช้ Saffron เพียงแค่ใส่มิกซ์อินในการประกาศ Sass และเรียกชื่อเอฟเฟกต์ภายในคลาส CSS ของคุณ คุณสามารถรับ Saffron ได้โดยติดตั้งโดยใช้ Bower หรือ Gem หรือเพียงดาวน์โหลดด้วยตนเองจาก Github.

7. การตั้งค่าประเภท

TypeSettings เป็นชุดเครื่องมือสำหรับ Sass มันจะตั้งค่าขนาดตัวอักษรในระดับโมดูลาร์โดยใช้ em (แทนที่จะเป็น rems หรือพิกเซล) จังหวะในแนวตั้งและหัวเรื่องตามสัดส่วนของการตอบสนอง คุณสามารถติดตั้งอันนี้ด้วย Bower ได้เช่นกันดาวน์โหลดรีลีสหรือลอกแบบ repo สำหรับรายละเอียดเพิ่มเติมดูที่หน้า.

8. Sass Line

Sass Line เป็น Sass mixin ที่ช่วยให้คุณพิมพ์ดีดได้ดียิ่งขึ้น มันใช้หน่วย rems ในแบบอักษรของคุณเพื่อให้คุณสามารถทำงานได้ตามสัดส่วนจากตารางพื้นฐาน Sass Line ใช้จังหวะแนวตั้งที่แม่นยำตามตารางพื้นฐานและช่วยให้คุณตั้งค่าแบบแยกส่วนสำหรับจุดพักของคุณเพื่อรับสัดส่วนที่ดีในทุกด้านของเว็บไซต์ของคุณ.

ไปที่นี่เพื่อรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีใช้.

9. Andy.scss

Andy.scss เป็นคอลเลกชันของมิกซ์ Sass ที่มีประโยชน์ซึ่งสร้างขึ้นเพื่อช่วยให้คุณพัฒนารูปลักษณ์ของเว็บไซต์ได้อย่างง่ายดายโดยที่ยังคงความเบา มีมิกซ์ Sass ให้เลือกหลายสิบแบบตั้งแต่พื้นหลังไปจนถึงภาพเคลื่อนไหว คุณสมบัติ CSS ที่ใช้กันทั่วไปเกือบทั้งหมดครอบคลุมอยู่ที่นี่ รับได้ที่ Github.

โพสต์เพิ่มเติมเกี่ยวกับ Sass:

• เริ่มต้นด้วย Sass
• ขุดลงไปใน Sass
• วิธีการรวบรวม Sass ด้วยข้อความประเสริฐ
• ใช้ Bootstrap 3 ด้วย Sass
• วิธีสร้าง VCard ออนไลน์ด้วย Sass & Compass
• ตัวประมวลผลก่อน CSS เปรียบเทียบ: Sass กับ น้อย
• สไตล์ชีตที่น่ากลัวทางสัณฐานวิทยา: การใช้เข็มทิศใน Sass
• วิธีการแปลง CSS เป็น Sass & SCSS