היום שבו גילית מה זה SASS

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

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

האתר של SASS למי שמעוניין קצת להרחיב מחוץ לפוסט http://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.