אוטומציה nth-Child בוררים עם Family.scss Mixins
סאס היא הדרך הטובה ביותר לנהל CSS המודרני ספריות יכול לחסוך זמן רב עוד יותר במהלך מחזור הפיתוח.
אלה mixins לעבוד כמו קודים אוטומטיים או פונקציות כי אתה קורא את הקבצים העיקריים Sass. חלק mixins הם בכלל יותר בעוד אחרים הם ספציפיים מאוד כגון Family.scs ספריה.
זה מציע ספריה חופשית ° mix לריצה מורכב : nth-child סלקטורים ללא שינון כל הקוד.
רוב המפתחים יודעים על : nth-child בחר ו כברירת מחדל, זה בהחלט לא מסובך. אתה פשוט להעביר בורר מספרי, לדוגמה : nth-child (2) שבו הכללים סגנון השייכים לחול על כל ילד השני של אלמנט ההורה.
עם זאת, זה יכול להיות הרבה יותר מורכב כאשר אתה רוצה לבחור אלמנטים דינמיים (כגון הראשון & האחרון) או כאשר אתה רוצה לבחור קומץ קטן של אלמנטים (כמו שלושת הילדים הראשונים).
זה המקום שבו Family.scss יכול לעזור. זוהי ספרייה קטנה מאוד והיא מכילה 26 פתרונות לבחירת ילדים החל בסיסיים ועד מורכבים. כל mixin יש הדגמה בדף הבית, שבו אתה יכול לגלוש ולסנן לפי הצורך.
הנה כמה דוגמאות מעניינות כדי להראות מה הספרייה הזו יכולה לעשות:
(1)- בחר את כל האלמנטים אחרי 5 הילדים הראשונים(3)- בחר את האלמנט השלישי של הילד האחרוןהכל אבל (3)- בחר את כל הילדים למעט השלישיאפילו בין (3, 12)- בחר את כל הילדים אפילו בין האלמנטים 3 & 12
יש עוד עשרות אתה יכול לגלוש דרך והם כל הדגמות כדי לעזור לך לדמיין איך הם עובדים.
כמה mixins מתקדמים להסתמך על שאילתות כמות כי לבחור אלמנטים אשר “לפחות” או “הכי הרבה” קבוע לטווח מסוים. לדוגמה, אתה יכול לבחור את כל הילדים עבור אלמנטים הורה שיש להם לפחות 5 ילדים (או יותר).
רעיונות אלה יכולים להיות מבלבל כאשר קוראים עליהם אבל הדגמות חיות באמת לעשות את כל זה ברור.
כדי לחפור פנימה, אתה יכול הורד עותק של ספריית מיקסין זו מתוך ריפו GitHub, יחד עם כל אלה הדגמות. בנוסף, תוכל לשתף את המחשבות או השאלות שלך עם יוצר הפרויקט ב- Twitter @ LukyVJ.
