ייבוא עם SASS

כיצד משתמשים ב-import ב-SASS. לא רק ב-import הרגיל אלא ב-Import מקונן

במאמר הקודם נכנסו עמוק לתוך קרבי ה-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.

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

פתרונות ומאמרים על פיתוח אינטרנט

עבודה עם GPT למתכנתים

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

גלילה לראש העמוד