תנאים ב-SASS
מאמר זה מסביר את התנאים ב-SASS.
אנו מסבירים בבירור הכול מהבסיס ועד שימושים מתקדמים בתנאים באמצעות הדירקטיבות @if, @else if ו-@else, עם דוגמאות מעשיות.
YouTube Video
תנאים ב-SASS
SASS היא שפת גיליונות סגנון המרחיבה את CSS, וניתן לשלוט בסגנונות בגמישות באמצעות תנאים. ב-SASS ניתן להשתמש ב-@if, @else if ו-@else כדי לשנות את פלט הסגנונות בזמן הקומפילציה.
תחביר בסיסי לתנאים
תנאים בסיסיים ב-SASS נכתבים בתחביר הבא.
1@if condition {
2 // Code executed when the condition is true
3} @else if condition {
4 // Code executed when another condition is true
5} @else {
6 // Code executed when all conditions are false
7}@ifמעריך את התנאי הראשון, ואם הוא שקרי, בלוקי@else ifאו@elseמוערכים לפי הסדר.
דוגמה פשוטה לתנאי
בדוגמה הבאה, צבע הרקע משתנה בהתאם למשתנה $theme.
1$theme: "dark";
2
3body {
4 @if $theme == "dark" {
5 background-color: #333;
6 color: #fff;
7 } @else if $theme == "light" {
8 background-color: #fff;
9 color: #000;
10 } @else {
11 background-color: #f0f0f0;
12 color: #333;
13 }
14}CSS שנוצר לאחר הקומפילציה
1body {
2 background-color: #333;
3 color: #fff;
4}- כאשר
$themeהוא"dark", מוחלים רקע כהה וצבע טקסט לבן.
שילוב תנאים עם חישובים
תנאים מטפלים לא רק בהשוואות של מחרוזות וצבעים, אלא גם בחישובים מספריים.
1$width: 1200px;
2
3.container {
4 @if $width > 1000px {
5 max-width: 1200px;
6 } @else {
7 max-width: 800px;
8 }
9}CSS שנוצר לאחר הקומפילציה
1.container {
2 max-width: 1200px;
3}- ניתנות גם השוואות מספריות, וכאשר
$widthעולה על 1000px, יופקmax-width: 1200px.
תנאים מקוננים
באמצעות קינון של תנאים ניתן לבטא תנאים מורכבים.
1$theme: "dark";
2$size: "large";
3
4button {
5 @if $theme == "dark" {
6 background-color: #000;
7 color: #fff;
8
9 @if $size == "large" {
10 padding: 20px;
11 } @else {
12 padding: 10px;
13 }
14 } @else {
15 background-color: #fff;
16 color: #000;
17
18 @if $size == "large" {
19 padding: 15px;
20 } @else {
21 padding: 8px;
22 }
23 }
24}CSS שנוצר לאחר הקומפילציה
1button {
2 background-color: #000;
3 color: #fff;
4 padding: 20px;
5}- קינון תנאים מאפשר עיצוב המבוסס גם על ערכת הנושא וגם על הגודל.
שימוש בתנאים בתוך פונקציות מותאמות אישית
שימוש בתנאים בתוך פונקציות מותאמות אישית יכול לשפר את היכולת לשימוש חוזר.
1@function adjust-color($theme) {
2 @if $theme == "dark" {
3 @return #333;
4 } @else if $theme == "light" {
5 @return #fff;
6 } @else {
7 @return #ccc;
8 }
9}
10
11.card {
12 background-color: adjust-color("dark");
13}CSS שנוצר לאחר הקומפילציה
1.card {
2 background-color: #333;
3}- בעיטוף התנאים בתוך פונקציות ניתן לשפר את השימוש החוזר ואת יכולת התחזוקה.
דוגמה מעשית - החלפת עיצובים
נבחן דוגמה להחלפת העיצוב הכולל על בסיס תנאים מסוימים.
1$theme: "light";
2
3body {
4 font-family: Arial, sans-serif;
5
6 @if $theme == "dark" {
7 background-color: #121212;
8 color: #e0e0e0;
9 } @else if $theme == "light" {
10 background-color: #f9f9f9;
11 color: #333;
12 } @else {
13 background-color: #fff;
14 color: #000;
15 }
16}
17
18header {
19 @if $theme == "dark" {
20 border-bottom: 1px solid #333;
21 } @else {
22 border-bottom: 1px solid #ccc;
23 }
24}CSS שנוצר לאחר הקומפילציה
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f9f9f9;
4 color: #333;
5}
6
7header {
8 border-bottom: 1px solid #ccc;
9}- ניתן להחליף באופן דינמי את סכמת הצבעים של כל הדף בהתאם למשתנה
$theme.
הערות ושיטות עבודה מומלצות
כאשר משתמשים בתנאים ב־SASS, אפשר לשקול את הנקודות הבאות.
-
השאירו את התנאים פשוטים
קינון מורכב פוגע בקריאות, ולכן שימוש בפונקציות ובמיקסינים מסייע לשמור על פשטות.
-
הפשטה באמצעות משתנים ופונקציות
אם אתם משתמשים בתנאים דומים במספר מקומות, ריכוזם במשתנים או בפונקציות משפר את יכולת התחזוקה.
-
הימנעו מלוגיקה מנופחת
אחדו את כללי העיצוב ככל האפשר והימנעו משימוש יתר בתנאים.
סיכום
התנאים ב-SASS הם כלי יעיל מאוד ליצירת סגנונות גמישים ודינמיים. כאן הסברנו צעד אחר צעד, מהבסיס ועד דוגמאות מעשיות. כאשר משתמשים בתנאים בפרויקטים אמיתיים, תכננו את הקוד לשימוש חוזר והקפידו שלא לסבך יתר על המידה.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.