ייבוא עם SASS

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

כפי שאנו יודעים, אנו יכולים להשתמש ב[email protected] ב-CSS על מנת לייבא גליונות של CSS לתוך ה-CSS שלנו. אפשר לעשות את זה באופנים הבאים:

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

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

מה שמיוחד ב-SASS הוא היכולת שלנו לייבא קבצי SCSS לתוך ה-SCSS שלנו ולקמפל אותם כחלק אינטגרלי מהקובץ. בואו ונניח ויש לי קובץ SCSS שמכיל חוקי reset. אם אני רוצה לכלול אותו בתוך קובץ ה-SCSS שלי, כל מה שעלי לעשות הוא ליצור את קובץ ה-reset עם התו _ לפניו. למשל reset.scss_ (שימו לב לקו התחתון _ לפני השם). כל קובץ עם קו תחתון לפני השם שלו לא יקומפל על ידי הקומפיילר של SASS (לא משנה באיזו סביבה – חלונות, לינוקס או מק). כך למשל, אם יש לי בתיקיה ה-input קובץ בשם reset.scss_ – אני לא אראה את המקבילה ה-CSSית שלו בתיקית ה-output. ה-SASS קומפיילר יתעלם ממנו לחלוטין.

על מנת להכליל אותו, אני צריך לעשות לו import באופן הבא:

@import "reset";

אם נציץ בקובץ ה-CSS שקומפל, נראה את כל תוכן reset.scss_ בתוך קובץ ה-CSS המקומפל!

הכנתי תרשים ויזואלי שידגים, אם לא הבנתם:

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

מקובל לשים את ה-import בראש העמוד.

import מקונן

ניתן לבצע import ישירות אל תוך סלקטור מסוים. בואו ונניח שיש לי קובץ בשם example.scss (שמקומפל כמובן כמו כל קובץ SCSS) והוא נמצא בתיקית ה-input. מה שיש בו זה את הפשתגן הבא:

.test {
  color: red;
}

.foo {
	font-size: 20px;
}

.foo {
	font-weight: 700;
}

בקובץ אחר של SCSS, יש לי את הסלקטור של main# שאליו אני 'מייבא' את כל ה-example.scss:

#main {
  @import "example";
}

איך זה יקומפל? כך:

#main .test {
  color: red;
}

#main .foo {
  font-size: 20px;
}

#main .foo {
  font-weight: 700;
}

שימו לב כמה זה גאוני! כך בעצם אני יכול לבצע ייבוא מתקדם לתוך class שלי. אבל יחד עם הגאונות באה גם סכנה כי קל להתפרע עם ה-import ולהגיע לגדלים מפלצתיים של ה-CSS, אז בזהירות עם זה. בנוסף, אי אפשר להציב import מקונן בתוך mixin או בתוך בקרת זרימה (משפטי תנאי, לולאות וכו'). כן אפשר לשים import רגיל.

במאמר הבא נדבר על הרחבה ב-SASS.