Notice: Undefined index: premium-vscroll in /home/codespir/domains/codespire.co.il/public_html/wp-content/plugins/premium-addons-for-elementor/includes/class-addons-integration.php on line 140

כתיבה יעילה ב-Sass

בעבר לא ממש הבנתי את הנהירה לעבר Sass אבל כשהתחלתי הבנתי את הקטע. אפילו כתבתי על זה בבלוג ״היום שבו גיליתי מה זה sass״. לקריאה: https://www.codespire.co.il/%D7%94%D7%99%D7%95%D7%9D-%D7%A9%D7%91%D7%95-%D7%92%D7%99%D7%9C%D7%99%D7%AA-%D7%9E%D7%94-%D7%96%D7%94-sass/

מאז ועד היום אני רואה הרבה אנשים שמבזבזים הרבה מאוד שורות קוד מיותרות ובעצם מגדילים משמעותית את גודל קבצי ה-css באתר במקום לצמצם אותן. אז הנה כמה טיפים שיעזרו לכם לכתוב sass בצורה יעילה יותר.

  1. תכתבו קלאסים כללים ותשתמשו בהם – למשל הקלאס d-flex בבוטסטראפ נותן לאלמנט Display flex או למשל הקלאס align-items-center שמאפשר למקם את האלמנטים בעזרת פלקסבוקס במרכז. בעצם לא צריך לכתוב לכל אלמנט css אלא להשתמש בקלאסים כללים כדי להגדיר התנהגות.
  2. כשאתם למשל כותבים כפתורים לאתר ויש לכם נניח 4 סוגי כפתורים שונים, תחשבו מה משותף לכל הכפתורים – למשל רדיוס, או צבע, או גודל פונט, ותתנו קלאס זהה לכולם כדי שיהיה ״נקודת פתיחה״ עבור הכפתורים. ואז תספקו שינויים ספציפיים. למשל: https://codepen.io/guytzhak/pen/yEWqJQ
  3. בעת כתיבת rtl+ltr כדאי להשתמש ב-mxin שיעזור לכם לכתוב מארג׳ינז ו-padding בהתאם לשפה ולבסוף לקמפל הכל ל-2 קבצים נפרדים. וורדפרס כאמור מתייחס אליהם בהתאם לשפה. יש סיפריה נחמדה ב-GitHub שמצאתי שתעזור לכם לכתוב את זה בצורה קלה יותר ובפרויקט הבא פשוט בפעם אחת תסגרו גם rtl וגם ltr:
    https://github.com/davidecantoni/sass-rtl-mixin
שיהיה סופ״ש נעים!

2 תגובות ל- “05/07/2018 – הניוזלטר היומי”

  1. ינון הגיב:

    לא שוכנעתי-

    מבחינת גודל קבצי css שנוצרו מ sass נוטים להיות גדולים יותר. בדרך כלל זה בגלל ה nested rules של סאס שהופכים להמון כללים

    את דוגמת הכפתורים אפשר לכתוב גם ב css רגיל

    נשארנו רק עם המיקסין ל rtl שזה אחלה אבל קצת ספציפי מדי

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

  2. גיא יצחק הגיב:

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

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

    לגבי ה-rtl כן זו דוגמא אחת ויש עוד עשרות רבות כמובן. אולי נעשה על זה וובינר ביום מן הימים 🙂

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *