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

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

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

עבודה עם GPT למתכנתים

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

למפתחי ובוני אתרי אינטרנט

מדריך לשאילתות יעילות ל Chat GPT

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

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