10 מדהים PostCSS תוספים לעשות לך אשף CSS

PostCSS הוא כלי רב תכליתי שמאפשר את זה לשנות סגנונות CSS עם. הגמישות שלה טמונה באופן שבו היא בנויה.

חלק הליבה של PostCSS הוא מודול Node.js שאתה יכול להתקין עם npm, ויש לו מערכת אקולוגית של יותר מ 200 plugins אתה יכול לבחור להשתמש בפרוייקט שלך.

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

PostCSS לוקח את קובץ ה- CSS הקיים שלך והופך אותו לנתונים קריאייטי ב- JavaScript, ולאחר מכן את plugins JavaScript לבצע את השינויים, ו PostCSS מחזירה את הגירסה ששונה של הקובץ המקורי. נשמע מגניב, לא?

במאמר זה אנו נסתכל על 10 PostCSS plugins ל לתת לך תובנה כמה דברים גדולים שאתה יכול להשיג עם הכלי הזה מדהים.

1. Autoprefixer

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

Autoprefixer משתמש בנתונים מ- Can I Use. בדרך זו הוא אינו מקבל תאריך, והוא יכול תמיד להחיל את הכללים האחרונים. אתה יכול לבדוק איך זה עובד באתר ההדגמה האינטראקטיבי שלה.

2. CSSnext

CSSnext הוא transpiler CSS זה מאפשר לך להשתמש בתחביר CSS בעתיד באתרים הנוכחיים. ל- W3C יש הרבה כללי CSS חדשים שאינם מיושמים כיום על ידי דפדפנים, אך הם יכולים לאפשר למפתחים לכתוב CSS מתוחכם יותר מהר וקל יותר. CSSnext נעשה כדי לגשר על הפער הזה.

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

3. PreCSS

PreCSS הוא אחד התוספים PstCSS שפועלים כמו preprocessor CSS. זה מאפשר לנצל את הסימון דמוי Sass בקובצי sytlesheet שלך.

על ידי הצגת PreCSS לתוך זרימת העבודה שלך אתה יכול להשתמש במשתנים, אחרת הצהרות, ל לולאות, mixins, @extend ו @import כללים, קינון ותכונות שימושיות רבות אחרות בקוד ה- CSS שלך. תיעוד Github של ה- PreCSS מספק הנחיות מפורטות כיצד להפיק את המרב ממנו.

4. StyleLint

סגנון הוא מודרנית CSS linter זה הגהה ומאמת את קוד ה- CSS שלך. זה מקל על מנת למנוע שגיאות ודוחף אותך לעקוב אחר מוסכמות קידוד עקבית.

StyleLint מבין את התחביר האחרון CSS, אז זה יכול לשמש יחד עם תוסף PreCSS שהוזכר קודם לכן. זה גם מאפשר לך לבצע את התצורה שלך, ואפילו בודק אם ההגדרות שלך תקפות.

5. נכסי הדואר לאחר תאריך המאזן

תוסף PostCSS הנכסים הוא נוח מנהל הנכס עבור קבצי CSS שלך. זה יכול להיות בחירה מצוינת אם אתה נוטה לקבל בעיות עם נתיבי כתובת אתר, כמו PostCSS נכסים מבודד קבצי Styheet שלך משינויים סביבתיים.

עליך להגדיר נתיבי טעינה, נתיבים יחסיים ונתיב בסיס, והתוסף יחפש באופן אוטומטי את הנכסים הדרושים לך. לדוגמה, אתה יכול לכתוב את הקוד הבא אם אתה צריך את כתובת האתר של foobar.jpg תמונה:

 body background: resol ('foobar.jpg'); 

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

6. CSSNano

אם אתה צריך אופטימיזציה קבצי CSS ממוזערים עבור אתר הייצור, כדאי לבדוק CSSNano. זה תוסף מודולרי המורכב רבים plugins קטן יותר, אחריות אחת PostCSS. זה לא רק לבצע טכניקות minific בסיסיים כגון הסרת whitespaces, אבל יש גם אפשרויות מתקדמות שהופכות אופטימיזציות ממוקד אפשרי.

בין תכונות רבות אחרות, CSSNano מסוגלת לעבד מחדש ערכי Z-index, צמצום מזהים מותאמים אישית, המרת ערכי אורך, זמן וצבע, והסרה של קידומות של ספקי מיושנות.

7. גופן הקוסם

אם אתה אוהד של טיפוגרפיה מתוחכמת, אתה בוודאי אוהב את קוסם גופן תוסף PostCSS. הקסם של גופן הקוסם מסתמך על היכולת שלו אוטומטית לייצר את כל הדרוש @סוג גופן כללים.

איך זה עובד די פשוט, אתה רק צריך להוסיף את font-family: "גופן Fav שלי"; כלל CSS אלמנט HTML, וקוסם גופן עושה את שאר העבודה. זה יכול להוסיף גופנים של Google, את העותק המקומי של גופן, Bootstrap טיפוגרפיה, והוא יכול גם לטעון גופנים אסינכרוני. הנה אתר ההדגמה האינטראקטיבי שלה.

8. כתוב SVG

האם תהית אי פעם על כמה מגניב יהיה לכתוב SVG נכון לתוך קבצי CSS שלך? בעזרת תוסף כתוב SVG PostCSS אתה יכול בקלות להשיג מטרה זו.

זה תוסף שימושי, למשל, מאפשר אחסן את הרקע והסמלים של SVG בקובץ CSS שלך, ומאוחר יותר הוסף אותם לאלמנט HTML הרלוונטי באופן הבא:

 @svg מרובע @ נכון מילוי: var (- צבע, שחור); רוחב: 100%; גובה: 100%; . דוגמה רקע: לבן svg (פרמטר מרובע (- צבע # 00b1ff)) כיסוי; 

9. רשת אבידה

רשת אבודים הוא תוסף PostCSS נהדר המספק לך מרשים מערכת רשת קס זה לא רק עובד עם CSS רגיל אבל גם עם שפות (Sass, LESS, Stylus). הוא משתמש קלני () CSS פונקציה ליצור רשתות יפה כי אתה יכול בקלות להשתמש מבלי לבזבז יותר מדי זמן עם התאמה אישית.

רשת אבידה יש ​​כללים פשוטים למדי, למשל הגדרת טור עם רוחב 25% לא לוקח יותר מקטע קוד קטן זה:

 div loss-column: 1/4; 

10. Sprites פוסט

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

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