מה זה SCSS? מדריך למתחילים עבור מפתחים

SCSS או (Sassy CSS) הוא CSS preprocessor המוסיף יכולות כמו משתנים, קינון, mixins, הורשה ועוד. הוא בעצם CSS superset, כלומר כל CSS תקין הוא גם SCSS תקין.

קבצי SCSS משתמשים בסיומת .scss, והתחביר הוא יותר מובנה וידידותי לתכנות בהשוואה ל CSS רגיל.

הבנת אופן הפעולה של SCSS

SCSS מאפשר למפתחים לכתוב סגנונות מתקדמים יותר המתורגמים לאחר מכן ל- CSS סטנדרטי שהדפדפנים מבינים.

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

תנו מבט למשל בקוד הבא:

$color: #3498db;
$padding: 10px;

.button {
  color: $color;
  padding: $padding;
  border: 1px solid darken($color, 10%);
}

זה יתורגם לאחר קומפילציה ל:

.button {
  color: #3498db;
  padding: 10px;
  border: 1px solid #2980b9;
}

היתרונות של שימוש ב-SCSS

SCSS מביא עימו מספר יתרונות בהשוואה ל-CSS רגיל:

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

הידעתם? Sass ו-SCSS הם שני תחבירי שפה שונים. SCSS תואם יותר ל-CSS ומשתמש בתחביר המוכר של CSS, בעוד ש-Sass משתמש בתחביר מבוסס הזחות (indentation) המציע סגנון תמציתי יותר. שניהם מתורגמים לאותו CSS ומציעים את אותן התכונות, כך שמפתחים יכולים לבחור באיזה תחביר להשתמש לפי העדפתם.

התחלת עבודה עם SCSS

לפני שתוכלו להשתמש ב-SCSS, עליכם להתקין את הקומפיילר של Sass. הדרך הפשוטה ביותר היא דרך npm (מנהל חבילות של Node):

npm install -g sass

פקודה זו מתקינה את קומפיילר Dart Sass באופן גלובלי. תוכלו לוודא את ההתקנה עם:

sass --version

קובץ ה-SCSS הראשון שלכם

צרו קובץ בשם style.scss ובצעו לו קומפילציה ל-CSS עם:

sass style.scss style.css

לפיתוח אקטיבי, השתמשו במצב watch. Sass יבצע קומפילציה מחדש אוטומטית בכל פעם שתשמרו את קובץ ה-SCSS:

sass --watch style.scss:style.css

ניתן גם לעקוב אחרי תיקייה שלמה:

sass --watch src/scss:dist/css

חקר תכונות מרכזיות של SCSS

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

משתנים – שמירת ערכים לשימוש חוזר

SCSS מאפשר שימוש במשתנים לאחסון ערכים כמו צבעים וגדלי פונטים:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

לאחר קומפילציה ל-CSS:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

קינון – ארגון הסגנונות בהתאם למבנה ה-HTML

SCSS מאפשר לכם לקנן סלקטורים כדי לשקף את מבנה ה-HTML, מה שמקל על קריאה ותחזוקת ה-CSS. כלל אצבע טוב הוא להימנע מקינון עמוק יותר מ-3 רמות. קינון מופרז יוצר סלקטורים ספציפיים מדי שקשה לדרוס ולתחזק.

.menu {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a { text-decoration: none; }
}

לאחר קומפילציה ל-CSS:

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li {
  display: inline-block;
}

.menu a {
  text-decoration: none;
}

סלקטור האב (&) – הפניה לאלמנט ההורה מתוך קינון

הסימן & מתייחס לסלקטור ההורה כאשר משתמשים בקינון. הוא חיוני עבור pseudo-classes, pseudo-elements ומודיפיירים בסגנון BEM.

.button {
  background: #3498db;
  color: white;

  &:hover {
    background: #2980b9;
  }

  &:active {
    transform: scale(0.98);
  }

  &--large {
    padding: 20px 40px;
    font-size: 18px;
  }

  &--disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

לאחר קומפילציה ל-CSS:

.button {
  background: #3498db;
  color: white;
}

.button:hover {
  background: #2980b9;
}

.button:active {
  transform: scale(0.98);
}

.button--large {
  padding: 20px 40px;
  font-size: 18px;
}

.button--disabled {
  opacity: 0.5;
  pointer-events: none;
}

Mixins – כתיבת קוד לשימוש חוזר.

SCSS מספק בלוקים של קוד לשימוש חוזר (mixins) היכולים להיות משותפים בין מספר סלקטורים:

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

לאחר קומפילציה ל-CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

הורשה עם @extend – שיתוף סגנונות בין סלקטורים

הדירקטיבה @extend מאפשרת לסלקטור אחד לרשת את הסגנונות של סלקטור אחר. זה שימושי כאשר מספר אלמנטים חולקים סגנון בסיס משותף.

.message {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.success {
  @extend .message;
  border-color: green;
  color: green;
}

.error {
  @extend .message;
  border-color: red;
  color: red;
}

לאחר קומפילציה ל-CSS:

.message, .success, .error {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.success {
  border-color: green;
  color: green;
}

.error {
  border-color: red;
  color: red;
}

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

Partials – פיצול הקוד לקבצים ניתנים לניהול

Partials הם קבצי SCSS ששמם מתחיל בקו תחתון (_). הקו התחתון אומר ל-Sass לא לבצע קומפילציה לקובץ כקובץ CSS נפרד. במקום זאת, מייבאים אותו לתוך קובץ SCSS אחר.

// _variables.scss
$primary-color: #3498db;
$font-size-base: 16px;

// _buttons.scss
.button {
  background: $primary-color;
  font-size: $font-size-base;
  padding: 10px 20px;
}

// main.scss
@use 'variables';
@use 'buttons';

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

הידור SCSS ל-CSS (קומפילציה)

לאחר כתיבת SCSS יש לבצע קומפילציה ולהפוך אותו ל-CSS כדי שהדפדפנים יוכלו לפרש אותו. ניתן לעשות זאת בכמה דרכים:

כלים משורת הפקודה – Command-line Tools

שימוש במדריך Sass הרשמי עם פקודות כמו:

sass input.scss output.css

Task Runners

כלים כמו Gulp או Grunt עוזרים באוטומציה של תהליך הקומפילציה:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('scss', function () {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

כלי בנייה מודרניים – Modern Build Tools

כלים כמו Vite, webpack ו-esbuild מטפלים בקומפילציה של SCSS כחלק מתהליך הבנייה. ל-Vite יש תמיכה מובנית ב-Sass – פשוט התקינו את חבילת sass וייבאו קבצי .scss ישירות.

עורכי טקסט – Text Editors

תוספים לעורכים כמו VS Code או Sublime Text יכולים לבצע קומפילציה ל-SCSS באופן אוטומטי.

הגדרת SCSS בסביבות שונות

SCSS משתלב כמעט בכל סביבת פיתוח web. כך מגדירים אותו בסביבות הנפוצות ביותר:

• Node.js: התקינו את Sass באמצעות npm עם npm install sass ובצעו קומפילציה לקבצי SCSS באמצעות Task Runner או ישירות משורת הפקודה.
• Ruby on Rails: השתמשו ב-cssbundling-rails עם gem "cssbundling-rails" והריצו rails css:install:sass. ה-gem הישן sass-rails התבסס על Ruby Sass שהוצא משימוש.
• WordPress: בצעו קומפילציה ל-SCSS בזמן הפיתוח וטענו את קובץ ה-CSS הסופי ב-תבנית הבת שלכם. תוספים כמו WP-SCSS יכולים גם לטפל בקומפילציה בצד השרת.

מערכת המודולים: @use ו-@forward

השינוי המשמעותי ביותר ב-Sass המודרני הוא המעבר מ-@import למערכת המודולים. בניגוד ל-@import שזורק הכל ל-scope הגלובלי, @use טוען כל קובץ כמודול עם namespace.

שימוש ב-@use במקום @import

עם @use, משתנים, mixins ופונקציות מקבצים אחרים נגישים דרך namespace:

// _variables.scss
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

// main.scss
@use 'variables';

body {
  color: variables.$primary-color;
  font-family: variables.$font-stack;
}

ניתן גם להגדיר namespace מותאם או להסיר אותו לחלוטין עם as:

@use 'variables' as vars;

body {
  color: vars.$primary-color;
}

// או להסיר את ה-namespace:
@use 'variables' as *;

body {
  color: $primary-color;
}

העברה עם @forward

הכלל @forward מייצא מחדש חברים ממודול אחר, מה ששימושי ליצירת נקודות כניסה מרוכזות:

// utils/_index.scss
@forward 'variables';
@forward 'mixins';

// main.scss
@use 'utils';

body {
  color: utils.$primary-color;
  @include utils.flex-center;
}

אם יש לכם פרויקט קיים שמשתמש ב-@import, תוכלו לבצע מיגרציה אוטומטית באמצעות כלי Sass Migrator הרשמי על ידי הרצת sass-migrator module --migrate-deps style.scss בטרמינל.

תכונות מתקדמות של SCSS

נסקור בקצרה כמה תכונות מתקדמות של SCSS:

לולאות:

יצירת קוד CSS דינמי עם לולאות:

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / $i;
  }
}

תנאים:

הוסיפו לוגיקה לעיצובים שלכם עם הצהרות @if.

$theme: dark;
body {
  @if $theme == dark {
    background: black;
  } @else {
    background: white;
  }
}

Maps:

אחסנו זוגות מפתח-ערך (key-value pairs) במפות.

$colors: (primary: #333, secondary: #555);
body {
  color: map-get($colors, primary);
}

שימושים של SCSS

• פרויקטים גדולים: SCSS עוזר לנהל פרויקטים גדולים על ידי שימוש חוזר בקוד וארגון טוב יותר.
• פיתוח מבוסס רכיבים: SCSS שימושי ב-frameworks כמו React ו-Angular בהן הסגנונות מחולקים לרכיבים. לגישת utility-first, שקלו את Tailwind CSS כאלטרנטיבה או השלמה ל-SCSS.
• תבניות: SCSS שימושי במיוחד לבניית מערכות מבוססות תבנית בהן ניתן לנהל בקלות צבעים וסגנונות באמצעות משתנים.

שאלות נפוצות

שאלות נפוצות בנושא SCSS:

סיכום

SCSS מרחיב את CSS עם משתנים, קינון, mixins, לולאות ומערכת מודולים שהופכים את כתיבת ה-stylesheets לקלה יותר לכתיבה ולתחזוקה. כל CSS תקין הוא גם SCSS תקין, כך שהאימוץ הוא הדרגתי ובסיכון נמוך.

אם אתם מתחילים פרויקט חדש, השתמשו במערכת המודולים המודרנית @use ו-@forward במקום @import. לפרויקטים קיימים, כלי Sass Migrator הרשמי מבצע את המעבר אוטומטית.

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