SASS – הוספת פונקצית SASS

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

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

ואחרי ההבהרות והאזהרות, בואו ונראה כמה זה פשוט.

פונקצית הדוגמה שלנו היא פונקצית חיפוש טקסט. אני נותן לה string ו-substring והיא מחזירה לי true או false בהתאם לנוכחות מה שחיפשתי.

ראשית, הקוד ברובי. מדובר בקוד פשוט ביותר שלא צריך להיות גאון ברובי על מנת להבין אותו


module Sass::Script::Functions
  
  def includes_string(string, substring)
    assert_type string, :String
    assert_type substring, :String
    Sass::Script::Bool.new(string.value.include?(substring.value))
  end
  declare :includes_string, [:string, :substring]
 
end

זה קוד פשוט שמקבל שני ארגומנטים – string ו-substring ומשתמש במתודת include של מחרוזת טקסט כדי להחזיר true או false.

את הפונקציה הזו אני אשמור כ-test.rb בתיקיה כלשהי. לצורך הפשטות, זו תהיה התיקיה שממנה אני מריץ את ה-SASS.

עכשיו, כל מה שנותר לי לעשות זה לבקש מ-SASS לכלול את test.rb כאשר אני מריץ אותו. איך אני עושה את זה?


sass --watch input:output -r test.rb


באמצעות הפרמטר r ושם הקובץ. שימו לב שאם הקובץ נמצא בתיקיה מסוימת שהיא לא התיקיה שבה אתם מריצים את SASS, חובה לכלול את הנתיב.

כל מה שנותר לי זה לבדוק את הפונקציה, איך נעשה את זה בקלות? עם debug:


@debug includes_string('hello world!', 'hello');

מיד כשנקמפל את הקובץ נוכל לראות את התוצאה הבאה בקונסולה:


input/test.scss:5 DEBUG: true

וזו ההוכחה שהכל תקין ועובד! אם משהו לא היה תקין בפונקציה שלנו או ב-include, היינו מקבלים את הטקסט הבא בקונסולה:


input/test.scss:5 DEBUG: includes_string("hello world!", "hello")

שזה אומר בעצם שהקומפיילר לא מכיר את ה-includes_string ומתייחס אליו כמחרוזת טקסט פשוטה.

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

זה המאמר האחרון בסדרת המדריכים על SASS.

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

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

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

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

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

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

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

רן בר-זיק

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

מאמרים אחרונים