אופרטורים ב-SASS

מאמר זה מסביר את האופרטורים ב-SASS.

נסביר את האופרטורים ב-SASS עם דוגמאות מעשיות.

YouTube Video

אופרטורים ב-SASS

האופרטורים של SASS כוללים פעולות נומריות, פעולות השוואה, פעולות לוגיות וטיפול במחרוזות.

פעולות אריתמטיות (חיבור, חיסור, כפל, חילוק, מודולו)

SASS תומך בפעולות אריתמטיות סטנדרטיות, אך פעולת החילוק / מבלבלת בשל קיומה גם ב-CSS, לכן מומלץ להשתמש ב-math.div(). למספרים יכולים להיות יחידות, וניתן לבצע פעולות רק בין יחידות תואמות.

להלן דוגמאות לאריתמטיקה פשוטה ולשימוש במודול math.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• קוד זה הוא דוגמה לחיבור וכפל עם יחידת px, וחילוק באמצעות ‎math.div().
• יחידות שאינן תואמות כמו 10px + 2em יגרמו לשגיאה או לתוצאה בלתי צפויה. אחדו יחידות מידה או השתמשו בפונקציות unit() ו-unitless().

טיפול והמרה אוטומטית של יחידות מידה

SASS מתמודד עם מספרים בעלי יחידות, וחוקי יחידות התוצאה תואמים לכללים פיזיקליים כלליים. לדוגמה, px/px הופך לערך ללא יחידה. יש להקפיד על ניהול יחידות מידה בעת שימוש בפונקציה unit() או לאחר שימוש ב-math.div().

להלן דוגמאות שמראות כיצד להתמודד עם חיבור ערכים בעלי יחידה וללא יחידה.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

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

אופרטורים להשוואה (==, !=, <, >, <=, >=)

ב-SASS קיימים אופרטורים להשוואה, אותם ניתן לשלב בהתניות (@if) וב- mixins. השוואת טיפוסים מורכבים כמו צבעים ורשימות פועלת לפי כללים ייחודיים. יש לשים לב שהשוואת צבעים משתנה בהתאם למרחב הצבעים.

להלן דוגמה שמשווה בין שני מספרים ומפצלת את הסגנון בהתאם.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• אופרטורים להשוואה יכולים להשתלב יחד עם @if לצורך יצירת כללי עיצוב מותאמים או מותנים.

פעולות לוגיות (and, or, not)

SASS תומך ב-and, or ו-not. השתמשו ב-and/or לצורך צירוף תנאים מרובים. אפשר להבהיר את סדר הקדימות וההרצה על ידי שימוש בסוגריים.

להלן דוגמה לטיפול בתנאים מורכבים באמצעות אופרטורים לוגיים.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

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

פעולות על מחרוזות — שרשור ואינטרפולציה

ב-SASS, ניתן לבצע שרשור של מחרוזות בעזרת אופרטור + או אינטרפולציה #{}. תוצאת האופרטור + תלויה אם המחרוזת משמאל במרכאות או לא, ולכן עדיף להשתמש באינטרפולציה הבטוחה #{}.

להלן דוגמאות לשרשור ולאינטרפולציה של מחרוזות.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• שימוש באינטרפולציה #{} מונע בעיות עם מרכאות והוספת רווחים לא רצויה.

אריתמטיקה של צבעים (מיושן)

בעבר, SASS תמכה ב'אריתמטיקת צבעים', שאפשרה להוסיף או לגרוע מספרים מצבעים. עם זאת, פונקציה זו התיישנה, ויש להשתמש בפונקציות מתוך המודול sass:color לצורך טיפול בצבעים.

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

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• אם ברצונך לטפל בצבעים, השתמש בפונקציות מתוך המודול ‎sass:color.

סוגריים וסדר קדימות של אופרטורים

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

להלן דוגמאות להבהרת סדר הביצוע באמצעות סוגריים.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• בדומה למתמטיקה, כללי סדר קדימות חלים, ולכן עדיף להשתמש בסוגריים כדי להבטיח חישוב בסדר הרצוי.

סיכום

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

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video