CSS לא מספיק מגניב, יאללה Sass

rotemtam ,15/11/2011

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

Css היא בעצם לא שפת תכנות (Programming Langauge) ואף לא שפת סימון (Markup Language), היא איננה משמשת לא לפרט למחשב סדר פעולות ופונקציות מסוימות ואף לא מתארת מידע מסוים, למעשה אפשר לחשוב עליה כמעין קובץ הגדרות, שבהקשר מסויים משפיע על איך מוצג מסמך מבוסס שפת סימון אחרת (html לגרסאותיו).

בתור לא-שפת-תכנות חסרים ב-css כמה דברים ש-sass באה לאפשר לנו:

  • יכולת להגדיר משתנים - css עבריינית גדולה של כלל התכנות החשוב ביותר אולי DRY - dont repeat yourself. אם למשל ה-stylesheet שלנו מבוסס על מספר צבעי בסיס, ואנו רוצים לשנות את הצבע, אנחנו צריכים לעבור בין הסלקטורים, אחד אחד ולערוך את הערך, שהוא קבוע.
  • יכולת למחזר קבוצות הגדרות - אם למשל יש קבוצת הגדרות שהולכת טוב ביחד, כמו למשל סטים של הגדרות שיוצרים סוג מסויים של drop shadow נעים או אפקט אחר בסגנון, הדרך ליישם מחזור של בלוק כזה של קוד הוא לקבץ אותו במחלקה נפרד ולהשתמש בו שוב ושוב במסמך המסומן (html). זה לא תמיד עובד ככה בשבילנו.
  • פונקציות - בגלל ש-css לא מקומפלת, ולא מפורשת (interpreted) לא ניתן לבצע חישובים, התניות וכו'
  • קינון - אין אפשרות לבצע nesting ל-css, אי אפשר לכתוב הגדרת css אחת בתוך השנייה, דבר בעייתי בהתחשב באופי המקונן++ של ה-dom אותו היא אמורה לתאר.

Sass מציע לנו פתרון אלגנטי לכל הבעיות שצוינו למעלה. אפשר לכנות את הפתרון אותו היא מציע compiled css - בדומה ל-coffeescript היא מציעה לנו סינטקס דמוי css (אבל על סטרואידים) אשר מתקמפל על ידיה ל-css תקני. ל-Sass שני סוגי סינטקס, האחד indented - דומה יותר לפייתון (נחשב מיושן אך עדיין נתמך) והשני scss, שיותר דומה ל-css רגיל במראה.

התקנה

  • צריך להתקין ruby - כאן לא צריך לפתח ברובי בשביל להנות מכלים שמפותחים ברובי!
  • לאחר הההתקנה צריך להתקין gem של sass - (משתמשי חלונות7, שימו לב שיתכן שתצטרכו להריץ את הcommand prompt עם הרשאות מנהל)
$ gem install sass

מעבירים פרויקט מcss לsass

  • פתחו שורת פקודה
  • גשו לתיקייה שבה שמור קובץ הcss הראשי שלכם
  • כתבו:
cp style.css style.scss
sass --watch style.scss:style.css
  • פתחו את style.css בעורך הטקסט האהוב עליכם, כדאי להגדיר גם לעורך לבצע syntax highlighting כאילו היה זה מסמך css סטנדרטי, הוא יציג מעט שגיאות חלק מהזמן, אבל בגדול יעבוד חלק.

מה שעשינו בעצם זה:

  • יצרנו עותק של קובץ הסגנון שלכם ושמרנו אותו כקובץ sass (סיומת scss)
  • הפעלנו את sass במצב watch, כלומר כל שינוי שתבצעו בקובץ הscss יורגש על ידי sass ויתקמפל אוטומטית לcss תקני בקובץ הcss שלכם.

 

משתנים ב-sass

משתנים מוגדרים בsass באמצעות סימן '$'.

כך הקוד הבא בsass:

$x = #ff0000;
 
div {
	background:white;
	color: $x;
 
}

יתקמפל ל:

div {
	background:white;
	color:#ff0000;
}

מיחזור קבוצת הגדרות: mixins

mixins הם בעצם הגדרות של קבוצות הגדרות שאפשר למחזר. מגדירים אותם באמצעות האופרטור @mixin ומשתמשים בהם באמצעות האופרטור @include. כך הקוד:

@mixin round-corners {
 
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
 
}
 
div#roundme {
	@include round-corners;
	color:red;
}

יתקמפל ל:

div#roundme {
 
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color:red;
}

קינון קוד

כפי שאמרנו, מגרעת גדולה של css היא חוסר היכולת לכתוב אותה בצורה מקוננת - כלומר - בצורה שבה יש משמעות למיקום היחסי של אלמנט אחד ביחס לאחר. כל שפה אחרת שאני מכיר לפחות תומכת בכך, בין אם אלו שפות תכנות שבה יש לבלוקים של קוד חשיבות האם אם נמצאים בתוך {} סוגריים מסלוסלים של if או האם הם נמצאים מוזחים (indented) בתוך לולאה בפייתון. ב-html יש משמעות שונה לגמרי האם תג div מסויים נמצא בתוך אחר.

זה לא ש-css לא מתייחסת לעובדה שה-dom ב-html הוא מקונן אבל היא עושה את זה עקום מאוד. כך למשך אם יש לנו קוד כזה:

<body>
    <div id="title">
        <h1>Hello World</h1>
    </div>
    <div id="content">
        <h1>This is the content</h1>
    </div>
</body>

אם אנחנו רוצים להתייחס בנפרד לכל אחד מתגיות הh1 אנחנו צרכים לכתוב משהו כזה ב-css:

    #title h1 {
        /* design rules */
    }
 
    #content h1 {
        /* design rules */
 
    }

בדוגמה של 2 אלמנטים זה לא נורא אבל כשאנחנו מגיעים לעמוד עם עשרות אלמנטים, או למסמך css שמתאר עשרות עמודים שונים זה מתחיל להיות בעיה.

Sass מאפשרות לנו לכתוב את הקוד למעלה בצורה הבאה:

#title {
    h1 {
        /* design rules */
    }
}
 
#content {
    h1 {
        /* design rules */
    }
}

ולקבל css תקני ונהיר לדפדפן.

אם אתם חשים שאתם צריכים צידוק יותר מבוסס ומנומק ללמה זה מגניב וחשוב, קראו את הפוסט מהבלוג של 37signals Taking control of the cascade, מומלץ מאוד גם לקרוא את הדיון בתגובות, שם חולקים על הטענות של המחבר.

3 תגובות

  1. מאת אלון ניסר:

    שים לב שאתה משתמש פה בפקודות לינוקס כמו cp, משתמש חלונות יעתיק את הקובץ עם copy או עדיף יתקין cygwin בpath שלו ואז יוכל להנות מפקודות הלינוקס

  2. [...] על Less ככלי לcss מורכב (אחיו של scss שכתבנו עליו בבלוג שלנו פוסט מפורט) ומוסיפה רובד של ג'אווסקריפט פלאגינס מבוססי jQuery [...]

  3. [...] המלצה מאיתנו - תשתמשו בpreproccessor של css נוסח sass שכתבנו עליו כאן בעבר או less, תשתמשו בprefixer (יש עוד המון [...]

תגובה