ייבוא עם SASS

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

כפי שאנו יודעים, אנו יכולים להשתמש ב-import@ ב-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 import example

SASS import example

אפשר להבין שבנייה נכונה של סביבת 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.

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)

תגיות: פורסם בקטגוריה: SASS

אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיקכותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי

הטוויטר שלי

פרופיל הפייסבוק שלי

אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.