9 מיקסין ספריות עבור מעצבי סאס צריך לקבל

אם אתה משתמש Sass ב זרימת העבודה שלך בפיתוח, אתה יודע את החשיבות של mixins. כאשר אתה רואה כמה דברים שנכתבו שוב ושוב ומייגע ב- CSS, זה המקום שבו mixins יכול לעזור לך למנוע עבודה חוזרת. Mixin מכיל הצהרות CSS שאתה יכול לעשות שימוש חוזר בכל האתר שלך.

ישנם mixins רבים נעשים על ידי מפתחים, כדי לעזור לך כאשר עובדים עם Sass בפיתוח שלך. רוב הדברים לכסות לעתים קרובות חוזרים על CSS. מ תוך התאמה לדפדפנים מרובים ל יצירת לחצנים, אנימציות ואפקטים המעבר, למצוא את זה ועוד 11 ספריות mixin אתה צריך לקבל לפיתוח סאס שלך.

1. בורבון

בורבון היא ספריית סאס המכילה mixin, פונקציות, ותוספים המאפשרים לך לפשט את היצירה של גליונות סגנונות עבור שימוש בדפדפנים שונים. בשבילי, זה mixing סאס הנפלא ביותר. הוא מכיל כמעט כל מה שאתה צריך כדי לסגנון את אתר האינטרנט שלך תוך שמירה על סגנונות קל.

בדוק את התיעוד המלא כדי להשתמש בכל mixin זמין ופונקציה.

2. Sass CSS3 Mixins

Sass CSS3 Mixins מספק mixins שעובד על פני דפדפנים שונים. תוכלו למצוא חבורה של מיטב mixins בפועל כאן כגון רקע, גבול, תיבת, עמודה, גופן פנים, המרה, מעבר, ואנימציה. זה מספיק עבור הצרכים שלך סטיילינג. כדי להשתמש, לייבא את css3-mixins.scss ולקרוא את mixin בכיתה CSS שלך.

הורד את זה mixin כאן.

3. CssOwl

CssOwl מספק mixins שימושי כדי להגדיר את המיקום של אלמנט (יחסי או מוחלט) ולהוסיף תוכן עם בורר pseudo ( :לאחר ו :לפני). זה גם עוזר כאשר אתה רוצה ליצור אלמנטים ספרייט: mixin נותן גמישות כדי להגדיר את המיקום התמונה ספרייט שלך. בנוסף Sass, ספריית cssOwl mixin זמין גם עבור LESS ו חרט.

4. נקודת עצירה Sass

Breakpoint מסייע לך להפוך שאילתות מדיה דרך סאס בצורה פשוטה. עם נקודת עצירה, אתה יכול ליצור משתנים ולתת לו ערך המגדירים את רוחב-רוחב או רוחב מרבי של שאילתות התקשורת. מכיוון שלמשתנה שיצרת יש שם בעל משמעות, ניתן לקרוא לו בקלות לשימוש ב- Sass.

5. סקוט

Scut מכיל קבוצה של mixs Sass לשימוש חוזר, מצייני מיקום, פונקציות ומשתנים המסייעים לך ליישם בקלות דפוסים נפוצים של קוד סגנון. הוא מספק קוד התרגול הטוב ביותר כדי ליצור דברים באינטרנט כמו פריסות עמוד ב טיפוגרפיה טיפוגרפיה. אתה יכול לצמצם את החזרה בעת כתיבת קוד על ידי שימוש חוזר בקוד לעתים קרובות יותר. לכן, עוזר לך לקבל מאורגן יותר בתהליך.

6. זעפרן

עם זעפרן, אתה יכול להוסיף אנימציות CSS3 ומעברים בקלות. יש תריסר אנימציות ומעברים זמינים, כולל לדעוך פנימה / החוצה, להחליק פנימה / החוצה, לעלות / לצאת, כמו גם אפקטים שונים כמו לרעוד, טטר, להקפיץ, ואחרים. כדי להשתמש זעפרן פשוט לכלול את mixin בהצהרה סאס, ולקרוא את שם האפקט בכיתה CSS שלך. אתה יכול לקבל זעפרן על ידי התקנת אותו באמצעות Bower או Gem, או פשוט להוריד אותו באופן ידני מ Github.

7. הקלד הגדרות

TypeSettings הוא סוג של ערכת כלים עבור Sass. זה יגדיר גודל גופן בקנה מידה מודולרי באמצעות אותם (במקום rems או פיקסלים), קצב אנכי, ואת כותרות יחס תגובה מבוסס. אתה יכול להתקין את זה עם Bower גם, להוריד את השחרור, או לשכפל את ריפו. לפרטים נוספים, בדוק את הדף שלה.

8. קו סאס

קו סאס הוא תערובת סאס שעוזרת לך לעשות טיפוגרפיה טובה יותר. היא משתמשת יחידת rems על הגופן שלך, כך שתוכל לעבוד אותו באופן יחסי מן הרשת הבסיסית. קו Sass משתמש בקצב אנכי מדויק המבוסס על רשת הבסיס, ומאפשר לך להגדיר מודולרי בקנה מידה עבור כל אחד breakpoints שלך כדי לקבל פרופורציות טובות על פני כל ההיבטים של האתר שלך.

עבור לכאן כדי לקבל פרטים נוספים על אופן השימוש בו.

9. Andy.scss

Andy.scss הוא אוסף של mixs סאס שימושי, בנוי כדי לעזור לך לפתח מראה האתר בקלות תוך שמירה על אור. יש עשרות של mixs סאס זמין, מרקע אנימציות. כמעט כל תכונות CSS הנפוצות בשימוש מכוסות כאן. תביא את זה לגיתוב.

הודעות נוספות על Sass:

• תחילת העבודה עם Sass
• לחפור לתוך סאס
• איך לקמפל סאס עם טקסט הנשגב
• באמצעות Bootstrap 3 עם Sass
• כיצד לבנות Online VCard עם Sass & מצפן
• CSS Preprocessors בהשוואה: Sass Vs. פחות
• גיליונות סגנונות מדהים: באמצעות מצפן ב Sass
• כיצד להמיר CSS ל Sass & SCSS