SASS: פונקציות שימושיות שכדאי לכם להכיר

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

מספר מילים על SASS

החלטתי להקדיש פסקה קצרה לטובת אלו שהגיעו אל הפוסט וכלל לא מכירים את SASS.
SASS (ראשי תיבות: Syntactically Awesome Style Sheets), היא הרחבה לכתיבת קבצי CSS תוך שימוש במשתנים, פונקציות וכלים נוספים שאנו מכירים משפות תכנות רגילות.
כתיבת SASS מאפשרת לנו לכתוב קבצי CSS קלים יותר לתחזוקה, במהירות רבה יותר ואף עוזרת לנו להימנע מכתיבת קוד חוזר.
כל קובץ SASS מתקפל לקובץ CSS רגיל. תהליך הקומפילציה מתבצע על ידי קומפיילרים ייעודיים כגון Koala, על ידי File watchers בעורכי קוד מתקדמים או על ידי כלים כגון Webpack או Gulp.
שימוש ב-SASS הוא סטנדרט בכל צוות פיתוח, לאחר שתנסו, לא תוכלו להפסיק 🙂

פונקציות שימושיות – בואו נתחיל…

צבע בהיר/כהה יותר

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

<div class="container">
  <div id="div1">Darken</div>
  <div id="div2">Main Color</div>
  <div id="div3">Lighten</div>
</div>

וה-SASS:

$main-color: #135891;

.container {
  display:flex;
}

div {
  flex:1;
  text-align:center;
  color:#FFF;
}

#div1 {
	background-color: darken( $main-color, 20% );
}

#div2 {
	background-color: $main-color;
}

#div3 {
	background-color: lighten( $main-color, 20% );
}

התוצאה:

ניתן לראות כי קיבלנו מצד ימין ושמאל צבע בהיר יותר וכהה יותר מצבע הבסיס בכ-20%.

לולאת for

כן, ניתן לעשות לולאות באמצעות SASS.
בדוגמא הבאה ניצור מחלקות CSS באמצעות for:

@for $i from 1 through 4 {
 .col-#{$i} {
  width: 100% / 4 * $i;
 }
}

מה נקבל?

4 מחלקות עם רוחב שונה:

.col-1 {
  width: 25%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 75%;
}

.col-4 {
  width: 100%;
}

לולאת each

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

ה-SASS:

@each $btn_name in 'warning' 'info' 'error' 'success' {
    .btn-#{$btn_name} {
        background-image: url('/dist/images/#{$btn_name}.png');
    }
}

והתוצאה:

.btn-warning {
  background-image: url(/dist/images/warning.png);
}

.btn-info {
  background-image: url(/dist/images/info.png);
}

.btn-error {
  background-image: url(/dist/images/error.png);
}

.btn-success {
  background-image: url(/dist/images/success.png);
}

יצירת Break Points גמישים לשינויים

בדוגמה הבאה יצרתי mixins אשר יאפשרו לנו לקבוע Break Points ובמידת הצורך לשנותם באופן גמיש:

@mixin break-point-large {
  @media only screen and (max-width: 1024px) {
    @content;
  }
}

@mixin break-point-medium {
  @media only screen and (max-width: 768px) {
    @content;
  }
}

@mixin break-point-small {
  @media only screen and (max-width: 480px) {
    @content;
  }
}

דוגמא לשימוש:

.aboutUs {
   width:70%;
  @include break-point-small {
    width:100%;
  }
}

והתוצאה:

@media only screen and (max-width: 480px) {
  .aboutUs {
    width: 100%;
  }
}

המרת font-size ליחידות rem

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

ראשית, ניצור פונקציה שתקבל את גודל הפונט ביחידות פיקסלים ותחזיר את הגודל ב-rem:

@function remCalculation($pxSize) {
  $remSize: $pxSize/ 16px;
  @return #{$remSize}rem;
}

כעת ניצור mixim שתקבל את הגודל בפיקסלים ותשתמש בפוקנציה שיצרנו קודם לכן:

@mixin fontSize($size) {
  font-size: $size; // Pixels
  font-size: remCalculation($size);
}

דוגמא לשימוש:

h3 {
  @include fontSize(24px);
}

ונקבל:

h3 {
  font-size: 24px;
  font-size: 1.5rem;
}

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)