למה לא להשתמש ב- CSS ומה ההבדל בין LESS ל- SASS?

איתי גולדמן צד לקוח, תכנות 9 במאי, 2022

למה לא להשתמש ב- CSS? ובכן חשוב לי לומר ראשית כל כי הדפדפן מבין ועובד לפי שפת CSS. אבל זה לא אומר שצריך לכתוב בה. שאר השפות נוחות ממנה ומתקמפלות ל- CSS כך שיש רק מה להרוויח. אכן, זה דורש שלב נוסף בהליך הפיתוח והוא התקנת דרך אוטומטית לקמפל ל- CSS, אבל יש הרבה כלים לעשות כן. ממילא, "שלב נוסף בפיתוח" הוא דבר הכרחי כשעובדים על פרויקט מודרני (אנחנו מדברים על Build Stage או Dev Stage) אז הפעם נוסיף לזה גם קימפול LESS או SASS. לא ביג דיל והיתרונות רבים.

האם צריך ללמוד שפה חדשה?

ממש לא, אלו הן שפות שנכתבו כמעין שיכבה מעל ה – CSS – וזה אומר שקוד CSS רגיל יתקמפל לנו בעזרת קומפיילר של LESS או SASS.

מה עדיף LESS או SASS?

עדיף SASS כי הוא בעל תפוצה רחבה ונחשב מודרני. בכל מקרה, שתי השפות ממש דומות. אני אפילו כותב מאמר אחד והוא מקיף את שתיהן. אז מעכשיו נתמקד ב- SASS. בשביל הדוגמאות במאמר הזה מספיק רק להחליף את ה- $ בסימן @ וראה זה פלא כתבתם בשפת LESS.

מה היתרונות כשנפטרים מ- CSS?

סוף סוף. יש כמה אבל אני אגע רק ב-2 ,3 הפשוטים ביותר והמשמעותיים ביותר.

1. משתנים (או קבועים ליתר דיוק)

הרעיון הוא שבמקום לרשום כמה פעמים במסמך #3f7548 אנחנו רושמים פעם אחת $color: #3f7548 ובכל מקום אחר משתמשים במשתנה הזה ועכשיו אפשרויות הפיתוח שלנו יותר גמישות. לא רק זאת, ניתן להוסיף גם כל מיני פונקציות כמו הבהרת המשתנה ב- 10% ובכך לחסוך חישוב ידני. דוגמא קלאסית נראית כך:


$my-color: #3f7548;

a {
	color: $my-color;
}

a:hover {
	color: lighten ($my-color, 10%);
}

2. קינון או ירושה של תכונות

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


.single-post {
	.title {
		font-size: 24px;
	}

	.body {
		font-size: 16px;
	}
}

.big-post {
	.title {
		font-size: 48px;
	}

	.body {
		font-size: 32px;
	}
}

3. קיצורי דרך

כתוספת לכלל הקודם, יש גם סימן מיוחד שמאפשר להתייחס לבלוק הנוכחי כהמשך ישיר של האב ולא כ-בן שלו. הסימן המיוחד הוא & והמשמעות שלו היא "הוסף לסלקטור של האב". הבה נשכתב את הדוגמא הראשונה בעזרת הסימן הזה.

$my-color: #37f823;

a {
	color: $my-color;

	&:hover {
		color: lighten ($my-color, 10%);
	}
}

איך מקמפלים את זה?

עוד לא נגענו בדברים החזקים באמת, כמו Mixin או לולאות וכבר זה הספיק לשכנע אותי. עכשיו רק נותר דבר אחד, וזה להסביר לכם איך לקמפל את זה. אני מניח שאתם משתמשים באדיטור של VS Code אחרת אתם לא במקצוע הנכון. אז הדרך הנאיבית ביותר היא להתקין תוסף כמו Easy Compile או עשרות אחרים ולקנפג מה שצריך. אני למשל אוהב להגדיר את נתיב הפלט ל- ../css ואז אם יש לי ספריה של SASS ובה קוד המקור, אז הפלט יהיה בספרייה של ה- CSS. ולשם נכוון את דף ה HTML שלנו. וזהו, כל פעם שעושים Save זה מתעדכן.