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

SCSS או (Sassy CSS) הוא CSS preprocessor המוסיף יכולות כמו משתנים, קינון, mixing, הורשה ועוד. הוא בעצם 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 מאפשר שימוש חוזר בקוד בצורה יעילה באמצעות משתנים ו-mixing ובכך מונע כפילויות.
• מודולריות: ניתן לפצל קוד SCSS לקבצים קטנים יותר (partials) ולייבא אותם לקובץ הראשי.
• תחזוקה: קינון ותחביר מובנה הופכים את SCSS לפשוט יותר לקריאה ולתחזוקה, במיוחד בפרויקטים גדולים.

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

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

כפי שציינו, SCSS הוא למעשה גרסה מורחבת של CSS שמוסיפה יכולות חזקות כמו משתנים, קינון, ו-mixings, שלא קיימות ב-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:

.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;
}

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;
}

הידור 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'));
});

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

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

שילוב SCSS עם שפות תכנות אחרות

ניתן לשלב את SCSS בסביבות פיתוח שונות וב frameworks כמו React, Angular, ו-Node.js.

// ב-React, ניתן לייבא קבצי SCSS
import './App.scss';

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

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

תכונות מתקדמות של 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 בהן הסגנונות מחולקים לרכיבים.
• תבניות: SCSS שימושי במיוחד לבניית מערכות מבוססות תבנית בהן ניתן לנהל בקלות צבעים וסגנונות באמצעות משתנים.

סיכום

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

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

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