SASS – הוספת פונקצית 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.

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

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

עבודה בהיי טק

איך מראיינים סניורים?

השיטה שלי לבדיקת התאמה טכנית למתכנתות ולמתכנתים בכירים עם כמה שנות ניסיון.

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

openAPI

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

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