05/07/2018 – הניוזלטר היומי

כתיבה יעילה ב-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 סוגי כפתורים שונים, תחשבו מה משותף לכל הכפתורים – למשל רדיוס, או צבע, או גודל פונט, ותתנו קלאס זהה לכולם כדי שיהיה ״נקודת פתיחה״ עבור הכפתורים. ואז תספקו שינויים ספציפיים. למשל: http://codepen.io/guytzhak/pen/yEWqJQ
  3. בעת כתיבת rtl+ltr כדאי להשתמש ב-mxin שיעזור לכם לכתוב מארג׳ינז ו-padding בהתאם לשפה ולבסוף לקמפל הכל ל-2 קבצים נפרדים. וורדפרס כאמור מתייחס אליהם בהתאם לשפה. יש סיפריה נחמדה ב-GitHub שמצאתי שתעזור לכם לכתוב את זה בצורה קלה יותר ובפרויקט הבא פשוט בפעם אחת תסגרו גם rtl וגם ltr:
    http://github.com/davidecantoni/sass-rtl-mixin
שיהיה סופ״ש נעים!