אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » SASS » SASS – הוספת פונקצית SASS

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

רן בר-זיק פברואר 17, 2013 8:27 am אין תגובות

כך מכניסים פונקציה שכתובה ברובי אל תוך הקומפיילר של SASS.

»SASS – פונקציות
»לעשות קומפילציה אוטומטית של קבצי SASS עם Grunt.js
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
SASS

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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