ייבוא עם 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.

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

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

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (1 הצבעות, ממוצע: 4.00 מתוך 5)

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

יאללה, שתפו :)

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

כתיבת תגובה

האימייל לא יוצג באתר.

רישום