תחביר SASS ותחביר SCSS

מאמר זה מסביר את תחביר SASS ותחביר SCSS.

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

YouTube Video

תחביר SASS ותחביר SCSS

‏SASS היא שפת גיליונות עיצוב שנועדה להרחיב את היכולות של CSS. ל-SASS יש שני תחבירים. אלו הם תחביר SASS ו-תחביר SCSS.

סקירה כללית על SASS ו-SCSS

תחביר SASS

תחביר SASS נכתב כך:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• תחביר מבוסס הזחות שאינו משתמש בסוגריים מסולסלים {} או בנקודה-פסיק ;.
• הוא נועד לאפשר כתיבת קוד תמציתי וקל לקריאה.
• סיומת הקובץ היא .sass.

תחביר SCSS

תחביר SCSS נכתב כך:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• תחביר הדומה ל-CSS, המשתמש בסוגריים מסולסלים {} ובנקודה-פסיק ;.
• תואם מאוד לקוד CSS קיים, מה שמאפשר להמיר קבצי CSS ישירות לקובץ SCSS.
• סיומת הקובץ היא .scss.

הבדלים עיקריים בין SASS ו-SCSS

קריטריונים לבחירה

איזה תחביר לבחור תלוי בצרכי הפרויקט והצוות.

• מתי לבחור בתחביר SASS

  • תחביר SASS מאפשר כתיבת קוד תמציתי ונקי.
  • אם הצוות כולו מכיר את תחביר SASS, זו בחירה מתאימה.

• מתי לבחור בתחביר SCSS

  • אם תאימות עם CSS חשובה ורבים מחברי הצוות מכירים CSS, תחביר SCSS מתאים יותר.

יתרונות SASS ו-SCSS

היתרונות הבאים משותפים גם לתחביר SASS וגם ל-SCSS:.

1. שימוש במשתנים

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

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

2. מיקסים

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

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

3. כללים מקוננים

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• על ידי שימוש בהטבעה (nesting), ניתן לכתוב סגנונות בצורה היררכית בהתאם למבנה ה-HTML, וכך להקל על קיבוץ חוקים קשורים. דבר זה משפר את קריאות הקוד ואת התחזוקה כאחד.

4. ירושה

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

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

סיום

הבחירה בין SASS ל-SCSS תלויה בהעדפת המפתח ובדרישות הפרויקט.

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

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

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

YouTube Video