SASS – משתנים

הסבר על משתנים ב-SASS

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

משתני SASS

כפי שאנו יודעים, יש לנו ב-CSS קלאסי לא מעט חזרות של משתנים, הדבר הכי קל הוא למשל שוליים:


#main {
  width: 5em;
}
#footer {
  width: 5em;
}
#header {
  width: 5em;
}

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


$width: 5em;

#main {
  width: $width;
}

#footer {
  width: $width;
}

#header {
  width: $width;
}

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

  1. טקסט
  2. מספרים
  3. צבעים
  4. ערכים בוליאנים (שזה בת'כלס true או false)
  5. רשימות – שזה בעצם טקסט

אם אתם צריכים דוגמה לרשימות (כי זה הכי מבלבל) אז הנה דוגמה טובה:


$margin: 2px 3px 4px 5px ;

#main {
  margin: $margin;
}

#footer {
  margin: $margin;
}

#header {
  margin: $margin;
}

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


$url: url("http://www.example.com/img/example.png") ;

#main {
  background-image: $url;
}


יקומפל אל:


#main {
  background-image: url("http://www.example.com/img/example.png");
}


פעולות במשתני SASS

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

במשתנים נומריים (מספרים), אפשר לבצע את כל הפעולות האריתמטיות: חיבור (+), חיסור (-), כפל (*), חילוק (/) ושארית (%).

במשתנים מבוססי טקסט אני יכול לבצע חיבור בין שני טקסטים (או שני משתנים) באמצעות הסימן +.

עכשיו, סביר להניח שתגידו – למה צריך את הדרעק הזה? למה לי להכניס חישובים מחורבנים לתוך ה-CSS שלי? ועוד לעשות חיבורים בין שני משתני טקסט?!? זה מה שחסר לי בחיים? עוד סיבוך ובלגנים עם CSS? משתנים זה סבבה אבל למה המתכנתים הדפוקים האלו צריכים לסבך כל דבר ולהוציא ממנו את המיץ?

טוב, בואו ונסתכל על הקוד הבא:


$width: 10;
$regular: $width+'px';
$big: $width*1.5+'px';
$huge: $width*2+'px';

#regular {
  margin: $regular;
}

#big {
  margin: $big;
}

#huge{
  margin: $huge;
}


אני צריך להסביר כמה גאוני זה? במקום להגדיר שוב ושוב גדלים של 'רגיל', 'גדול' ו'ענק'. אני פשוט מגדיר גודל אחד בסיסי ומבצע הגדלה שלו באמצעים תכנותיים פשוטים! הקוד שלעיל יקומפל לקוד הבא:


#regular {
  margin: "10px";
}

#big {
  margin: "15px";
}

#huge {
  margin: "20px";
}

כל הפעולות הנומריות תומכות בסוגריים, אגב, אם אתם ממש צריכים. רק הערה קטנה בנוגע לחילוק – ב-CSS אפשר להשתמש בסימן '/' – עד כמה שאני זוכר בפונט – כך למשל font: 10px/12px אומר שגודל הפונט הוא 10px וגודל השורה (line height) הוא 12px – אז כדי להיות בטוחים שהחלוקה באמת תתבצע והוא לא ידפיס את הסימן, שימו את הביטוי בסוגריים. בכלל לשים פעולות אריתמטיות בסוגריים זה מנהג שיחסוך לכם צרות.

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

פוסטים נוספים שכדאי לקרוא

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

ESP32 מאפס לילדים

מדריך ל-ESP32 לילדים ולהורים מאפס

אחד הדברים הכי כיפיים בעולם הוא תכנות ותכנות בעולם האמיתי – המפעיל אורות, ציוד אלקטרוני ומכשירים הוא מלהיב ממש. המדריך מיועד להורים שרוצים ללמד את הילדים שלהם לתכנת.

פיתוח ב-JavaScript

Axios interceptors

תכנון נכון של קריאות AJAX באפליקציה ריאקטית וניהול השגיאות או ההצלחות עם פיצ׳ר נחמד של axios

פתרונות ומאמרים על פיתוח אינטרנט

SSG עם next

אחרי שלמדנו במאמר הקודם מה זה SSR והבנו שלא מדובר בקליע כסף שפותר את כל הבעיות שלנו, נלמד על SSG שיכול להקל על כמה מהבעיות של SSR.

גלילה לראש העמוד