ทำให้ตัวเลือก nth-child เป็นแบบอัตโนมัติด้วย Family.scss Mixins
Sass เป็นวิธีที่ดีที่สุดในการจัดการ CSS ที่ทันสมัยและ ห้องสมุดมิกซ์ สามารถประหยัดเวลาได้มากขึ้นในระหว่างรอบการพัฒนา.
มิกซ์อินเหล่านี้ทำงานเหมือนกัน รหัสหรือฟังก์ชั่นอัตโนมัติ ที่คุณโทรในไฟล์ Sass หลักของคุณ มิกซ์อินบางชนิดนั้นมีความกว้างมากกว่าในขณะที่มิกซ์โซลินเฉพาะเจาะจงเช่น ห้องสมุด Family.scss.
ข้อเสนอห้องสมุดฟรีนี้ 26 มิกซ์อิน สำหรับการทำงาน ซับซ้อน : ที่ n-เด็ก เตอร์ โดยไม่ต้องจำรหัสทั้งหมดนั้น.
นักพัฒนาส่วนใหญ่รู้เกี่ยวกับ : ที่ n-เด็ก ตัวเลือกและโดยค่าเริ่มต้นมันไม่ซับซ้อนอย่างแน่นอน คุณเพียงแค่ ผ่านตัวเลือกตัวเลข, ตัวอย่างเช่น : ที่ n-เด็ก (2) โดยที่กฎสไตล์การเป็นเจ้าของจะมีผลกับลูกทุกวินาทีขององค์ประกอบหลัก.
อย่างไรก็ตามสิ่งนี้อาจซับซ้อนกว่านี้เมื่อคุณต้องการเลือก องค์ประกอบแบบไดนามิก (เช่นแรกและสุดท้าย) หรือเมื่อคุณต้องการเลือก องค์ประกอบเล็ก ๆ น้อย ๆ (เช่นลูกสามคนแรก).
นี่คือที่ Family.scss สามารถช่วยได้ มันเป็นห้องสมุดที่เล็กมากและมันมีโซลูชัน 26 ตัวสำหรับตัวเลือกลูก ตั้งแต่พื้นฐานไปจนถึงซุปเปอร์คอมเพล็กซ์. มิกซ์อินแต่ละอันมีการสาธิตในหน้าแรกซึ่งคุณสามารถเรียกดูและกรองได้ตามต้องการ.
นี่คือบางส่วน ตัวอย่างที่น่าสนใจ เพื่อแสดงว่าไลบรารีนี้สามารถทำอะไรได้บ้าง:
หลังจากครั้งแรก (5)- เลือกองค์ประกอบทั้งหมดหลังจาก 5 ลูกแรกจากปลาย (3)- เลือกองค์ประกอบลูกที่ 3 ถึงลูกสุดท้ายทั้งหมด แต่ (3)- เลือกลูกทั้งหมดยกเว้นลำดับที่ 3สม่ำเสมอระหว่าง (3, 12)- เลือกลูกคู่ทั้งหมดระหว่างองค์ประกอบที่ 3 และ 12
มีอีกหลายสิบที่คุณสามารถเรียกดูและพวกเขาแต่ละคนมีการสาธิตเพื่อช่วยให้คุณเห็นภาพว่าพวกเขาทำงานอย่างไร.
มิกซ์ขั้นสูงเล็กน้อย พึ่งพาแบบสอบถามปริมาณ องค์ประกอบที่เลือกคือ “อย่างน้อย” หรือ “ที่มากที่สุด” จับจ้องไปที่ช่วงที่แน่นอน ตัวอย่างเช่นคุณสามารถเลือกเด็กทุกคนสำหรับองค์ประกอบหลักที่มีลูกอย่างน้อย 5 คน (หรือมากกว่า).
ความคิดเหล่านี้อาจสร้างความสับสนเมื่ออ่านเกี่ยวกับพวกเขา แต่ การสาธิตสด ทำให้ทุกอย่างชัดเจนจริงๆ.
ในการขุดคุณสามารถ ดาวน์โหลดสำเนา ของห้องสมุดมิกซ์อินนี้จาก repo ของ GitHub พร้อมกับตัวอย่างเหล่านี้ทั้งหมด และคุณสามารถแบ่งปันความคิดหรือคำถามของคุณกับผู้สร้างโครงการบน Twitter @ LukyVJ.
