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 168

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

*הערה: זה לא בדיוק SASS, זה SCSS. אותו הדבר בעצם, לא נכנס בדיוק לדקויות 🙂

האתר של SASS למי שמעוניין קצת להרחיב מחוץ לפוסט https://sass-lang.com/

כדי להתחיל, אדגיש קודם ש-SASS נועד עבור אנשים שיודעים CSS ומחפשים דרך מהירה יותר להפוך CSS לשפת תכנות עם משתנים, פונקציות וכו' וכו'. כך למשל ניתן להגדיר צבע ו"לרוץ" איתו לאורך האתר, או להגדיר "מרווח" קבוע ולהשתמש בו בכל מקום בו ישנו Padding קבוע.

כתיבת SASS נעשית בעזרת כלי שידע "לקמפל" אותו ל-CSS. בסופו של דבר כותבים SASS וזה ימיר את זה ל-CSS נקי וטהור כמו שכולנו אוהבים. אני ממליץ על Koala בה אני משתמש אך קיימות חלופות אחרות (בתשלום ובחינם) שיעשו את העבודה ויותר מכך.

נתחיל…

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

זו היא דוגמא לקוד קטן. הגדרנו משתנה בשם $font-stack ולאחריו עוד משתנה בשם $primay-color. לאחר מכן השתמשנו בשניהם תחת תג ה-Body. כך נוכל להמשיך ולהשתמש בצבע הזה גם במקומות אחרים. כאשר נרצה לשנות את גוון הצבע של אתר פשוט נשנה מכאן את ערך המשתנה והוא ישתנה לאורך כל האתר. מגניב? חכו עוד קצת.

התוצאה של הקוד שאותו הראתי תהיה ב-CSS כך:

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

עוד דוגמא הינה "שרשור". במקום להתחיל לכתוב דיב בתוך דיב בתוך דיב בתוך HEADER בתוך בודי בתוך HTML, נוכל לכתוב כך:

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li { display: inline-block; }
        a {
            display: block;
            padding: 6px 12px;
            text-decoration: none;
    }
}

ולקבל את התוצאה:

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav li {
    display: inline-block;
}

nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

 

זה דיי מגניב ועוזר לך תמיד לזכור היכן אתה בקוד, בלי להסתבך.

דבר נוסף ומגביה הוא IMPORT בו ניתן כך לאחד כמה קבצי SCSS לקובץ אחד בסופו של דבר, כך שכאשר כותבים מחלקים את ה-CSS לקבצים שונים למשל אחד לHEADER, אחד לעמוד X ואחר לעמוד Y, ולבסוף לאחד הכל לקובץ CSS אחד בעזרת קובץ SCSS (SASS) אחד ועוד אפילו לעשות לו MINIFY אוטומטי 🙂

בפרויקט האחרון שלי שאני קצת מנוע מלפרסם אותו כאן הצלחתי לצמצם את שורות הקוד שלי משמעותית ולהוביל לכך שבמקום שאני אבזבז 50% מזמן הפרויקט על כתיבת CSS ידנית אני מבזבז כ-20% מהזמן של הפרויקט על כתיבת ה-CSS (או יותר נכון SASS).

אציין לסיכום שאין כאן קסם, חייב לדעת CSS כדי לעבוד עם SASS אך קיצור הדרך, הנוחות, הקלילות והזרימה ממש תורמים לכתיבה מהירה של CSS ולהקמה מהירה של אתרים. הפרויקט האחרון היה פרויקט פיתוח תבנית וורדפרס מ-0 וכך גם קובץ ה-CSS שנכתב מ-0 לגמריי ונגמר ב-400 שורות קוד (עם רווחים והכל) במקום כ-2500.

עקומת הלמידה המהירה, המגניבות, הזרימה (בעיקר) הובילו אותי לכדי המלצה – רק SASS! (או LESS למי שמעדיף).

בפוסטים הבאים אנסה להביא לידי ביטוי כאן גם את -LESS כדי להשוות בין SASS לבין LESS.

8 תגובות ל- “היום שבו גילית מה זה SASS”

  1. איתמר הגיב:

    מה אתה מעדיף? LESS או SASS?

    • admin הגיב:

      היי איתמר,
      אני כרגע מכיר רק את SASS. לעומת זאת את LESS לא ניסיתי, רק קראתי על כך. בינתיים כאשר שניהם למעשה דיי דומים אני אשאר עם SASS כדי להתרגל לסוג העבודה החדש 🙂
      אמשיך לעדכן

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

    תמשיך לנסות וללמוד את Preprocessors ושלב הבא ללמוד על mixins ותנאים השונים.

  3. יניב הגיב:

    תוכל להסביר לי את זה?
    "הערה: זה לא בדיוק SASS, זה SCSS. אותו הדבר בעצם, לא נכנס בדיוק לדקויות"
    סתם מעניין למה הכוונה…

  4. itayko הגיב:

    אחלה מאמר אחי תמשיך כך.
    איך זה הולך עם וורדפרס ? מבחינת כתיבת SASS בהתאמה אישית – CSS.
    לא ניסיתי אבל אני די בטוח שזה לא יצליח.
    משהו מיוחד לגבי וורדפרס?

    • גיא יצחק הגיב:

      היי איתי.
      עבודה עם SASS דורשת לקמפל את הקבצים ל-CSS בעזרת כלים למשל בתור התחלה:
      https://koala-app.com/
      בהמשך תנסה לקרוא על GULP על מנת לקמפל בצורה טובה ואיכותית יותר. למידע נוסף מוזמן ליצור קשר להדרכה מעמיק יותר 🙂 אשמח לעזור

כתיבת תגובה

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