מחרוזות ב-SASS

מאמר זה מסביר על מחרוזות ב-SASS.

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

YouTube Video

מחרוזות ב-SASS

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

יסודות המחרוזות

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

1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;

הערות

• מחרוזות במרכאות נחשבות כליטראלים של מחרוזת באופן ישיר.
• מחרוזות ללא מרכאות מתפרשות לרוב כמזהים של CSS כמו שמות מחלקות או IDs, אז יש לשים לב להשתמש בהן כראוי.

שרשור מחרוזות

ב-SASS ניתן לשרשר מחרוזות באמצעות האופרטור +.

1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"

• הקוד הזה הוא דוגמה לשימוש באופרטור + ב-SASS כדי לשרשר מספר מחרוזות וליצור מחרוזת חדשה.

דוגמה מתקדמת: יצירת שמות מחלקות

1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5    content: $base-class + "--" + $modifier; // "btn--primary"
6}

• הקוד הזה הוא דוגמה לשימוש באופרטור + ב-SASS כדי לשלב שם מחלקה בסיסי עם שם של מודיפייר וליצור שם מחלקה חדש.

שימוש בפונקציות של מחרוזות

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

quote() ו-unquote()

עם הפונקציות quote() ו-unquote(), ניתן להוסיף או להסיר מרכאות ממחרוזות.

1$quoted: quote(Hello);    // '"Hello"'
2$unquoted: unquote("Hello"); // Hello

str-length($string)

הפונקציה str-length() מחזירה את האורך של מחרוזת.

1$length: str-length("Hello"); // 5

str-insert($string, $insert, $index)

הפונקציה str-insert() מכניסה מחרוזת למיקום מוגדר.

1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"

str-slice($string, $start-at, [$end-at])

הפונקציה str-slice() מחלצת חלק ממחרוזת.

1$substring: str-slice("Hello, World!", 1, 5); // "Hello"

to-upper-case() ו-to-lower-case()

הפונקציות to-upper-case() ו-to-lower-case() ממירות מחרוזת לאותיות גדולות או קטנות בהתאמה.

1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"

מחרוזות בלוגיקה תנאית

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

 1$theme: "dark";
 2
 3@if $theme == "dark" {
 4  body {
 5    background-color: black;
 6    color: white;
 7  }
 8} @else {
 9  body {
10    background-color: white;
11    color: black;
12  }
13}

• הקוד הזה הוא דוגמה לשימוש בהוראת @if ב-SASS לבדוק אם הנושא הוא dark ולהחליף סגנון בהתאם.

דוגמה פרקטית: יצירת נתיבי רקע דינמיים לתמונות

להלן דוגמה לשימוש במניפולציות מחרוזת כדי ליצור כתובת URL של תמונת רקע.

1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6    background-image: url($image-path + $image-name + $image-extension);
7}

תוצאה מקומפלת

1.background {
2    background-image: url("/images/background.jpg");
3}

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

שילוב עם רשימות ומפות

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

דוגמה לרשימה

1$states: "hover", "focus", "active";
2
3@each $state in $states {
4    .btn-#{$state} {
5        content: "Button in " + $state + " state";
6    }
7}

תוצאה מקומפלת

1.btn-hover {
2    content: "Button in hover state";
3}
4.btn-focus {
5    content: "Button in focus state";
6}
7.btn-active {
8    content: "Button in active state";
9}

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

דוגמה למפה

 1$colors: (
 2    "primary": "#3498db",
 3    "secondary": "#2ecc71"
 4);
 5
 6@each $name, $color in $colors {
 7    .text-#{$name} {
 8        color: $color;
 9    }
10}

תוצאה מקומפלת

1.text-primary {
2    color: #3498db;
3}
4.text-secondary {
5    color: #2ecc71;
6}

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

הסרת תווים מיוחדים במחרוזות

כדי להשתמש במחרוזות מסוימות כמזהים של CSS בצורה בטוחה, ייתכן שיש צורך בהסרת תווים מיוחדים.

1$special_character: "example\\@123";
2.#{$special_character} {
3  content: "This is a valid CSS class.";
4}

תוצאה מקומפלת

1.example\@123 {
2    content: "This is a valid CSS class.";
3}

• הקוד הזה הוא דוגמה להתייחסות למחרוזת המכילה תווים מיוחדים כמשתנה ב-SASS, להרחבתה עם ‎#{$variable}‎, ולשימוש בה כשם מחלקה חוקי ב-CSS.

סיום

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

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

YouTube Video