משתני SASS

מאמר זה מסביר את משתני SASS.

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

YouTube Video

משתני SASS

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

מהם משתני SASS?

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

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

כיצד לכתוב משתנים

ניתן לכתוב משתנים כך:.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• יש להקדים את שם המשתנה בסימן $.
• variable-name הוא שם המשתנה. מומלץ לתת לו שם ברור ומוסבר.
• value הוא הערך שמוקצה למשתנה.

שימוש בסיסי במשתנים

להלן דוגמה בסיסית למשתנה SASS.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• לאחר הגדרת משתנה כמו $primary-color, תוכלו להשתמש באותו ערך כמה פעמים שתרצו.
• כאשר משנים ערך, יש רק לעדכן את הגדרת המשתנה, וכך משפרים את התחזוקה.

פלט CSS שנוצר

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

שימוש במשתנים בתוך קינון

שילוב קינון SASS עם משתנים מסייע לארגן את הקוד ומקל על ניהולו.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• ניתן להשתמש במשתנים בתוך סלקטורים מקוננים.
• על ידי שילוב משתנים, באפשרותך להשיג עיצוב גמיש, כגון הפיכת צבע לכהה יותר ב-10% באמצעות פונקציית color.adjust.

פלט CSS שנוצר

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

משתנים עם ערכי ברירת מחדל

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

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

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

פלט CSS שנוצר

1p {
2    font-size: 16px;
3}

טווח משתנה (Scope)

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

1. טווח כללי

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• משתנים בטווח הכללי זמינים בכל רחבי הקובץ.

2. טווח מקומי

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• משתנים בטווח המקומי זמינים רק בתוך קינון מסוים או קובץ מסוים.

שימוש במשתנים בחישובים

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

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

פלט CSS שנוצר

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• שימוש במשתנים להתאמת צבעים או לחישובי ריווח משפר את התחזוקה.

סיכום

משתני SASS הם תכונה חיונית לניהול ותחזוקה יעילים של CSS.

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

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

YouTube Video