גרדיאנט דינאמי עם SASS

מדי פעם מגיע לשולחננו עיצוב לאתר שחלק ממה שמרכיב אותו הוא שימוש במעברי צבע, או בשמו הנפוץ יותר – Gradient.

Gradient הוא מעבר של צבע אחד לשני (או יותר). השימוש בו מעט מורכב יותר משימוש בצבע אחיד. הטמעה של Gradient ב-CSS גם אומרת בחלק מהמקרים שצריך לקחת בחשבון את האלמנט שעליו הוא מוכל, מה שבחלק מההמקרים אומר שכפול של אותו הקוד, עם שינוים קטנים במשתנים שמרכיבים אותו.

המשתנים שמרכיבים את הגרדיאנט:

1. הצבעים עצמם אלה שיוצרים את המעבר עצמו.

2. המערכת היחסים ביניהם כמה שטח כל אחד מהם תופס ביחד במעבר.

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

הצורה הנכונה לחשוב על Gradient כ-style היא יותר מודולורית, לייצר one source of truth שמכיל המשתנים למעלה,. בצורה כזאת, השינוים שנעשים מותאמים לאלמנט עליו מוכל האפקט, מבלי לשכפל כל פעם את כל ה-CSS properties לכל אלמנט – וכאן נכנס SCSS/SASS לתמונה.

SCSS/SASS היא extension לכתיבת CSS, שמאפשרת בניה מורכבת יותר של בלוקים של CSS, דברים כמו: כתיבת משתנים, כתיבת פונקציות, התניות, לולאות אפשריים בתוך קובץ SASS, או בקיצור, SASS שמה את ה-C של MVC ב-CSS.

אני אסביר כאן בכמה שלבים פשוטים איך הופכים גרדיאנט למשתנה דינאמי עם SASS:

1. מגדירים של הצבעים שמרכיבים את ה-gradient כמשתנים

חלק חשוב במערכת סטיילים הוא הגדרה של צבעים כמשתנים, לכן התחלנו בלהגדיר את הצבעים שמרכיבים את ה-Gradient (במידה והם לא כבר חלק מהסטיילים).

$color_pink: #5551FF; 
$color_dark_purple: #F9705D;

2. כותבים הפונקציה

כותבים פונקציה ב-SCSS שיכול לקבל את כל מה שיכול להשתנות  – במקרה שלנו זה הזוית – degree$, היחס בין הצבעים – spread$, והסוג של האלמנט עליו מוכל האפקט – $contain.

@mixin color-gradient($degree, $spread, $contain) {
  background: linear-gradient(#{$degree}deg,$color_pink 0%,$color_purple $spread);
    @if $contain == "text" {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

3. קוראים לפונקציה מכל אלמנט

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

הנה כמה דוגמאות:

כפתור

See the Pen SCSS gradient function – button by Idan (@idan_w4) on CodePen.

סקרולר

See the Pen SCSS gradient function – scroller by Idan (@idan_w4) on CodePen.

טקסט

See the Pen SCSS gradient function – text by Idan (@idan_w4) on CodePen.

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

SASS IT UP!

*עוד פרטים על איך להתקין את SCSS/SASS לפי ה-IDE שלכם אפשר למצוא כאן