תחי ישראל -אין לנו ארץ אחרת

יותר CSS באמצעות LESS

מחבר:

בתאריך: 10.03.2012

השימוש בהרחבת LESS כדי לכתוב CSS יעיל יותר

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

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

משתנים
אופרטורים
פונקציות

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

LESS היא לא ההרחבה היחידה מסוגה ל-CSS, וכתחליף ניתן לעבוד עם SASS, אבל בעוד LESS מבוסס על JavaScript, מבוסס SASS על Ruby. מבחינתי, בתור אדם שעובד עם PHP ו-JavaScript, הבחירה ב-LESS היא טבעית.

כיצד LESS מרחיב את CSS והופך אותו יעיל יותר?

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

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

התקנת LESS

1. מורידים את LESS.js לתיקיית השורש מאתרlesscss.org. לחלופין אפשר להשתמש ב-cdn (הקובץ הנדרש מאוחסן on-line במקום בתיקיית האתר) כפי שאני מראה בדוגמה.

2. יוצרים גיליון עיצוב עם סיומת less בתיקיית השורש (לדוגמה, style.less).

3. כוללים הפניות ל- LESS.js ול- style.less ב-head של דפי האינטרנט. באופן הבא:

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet/less" type="text/css" href="styles.less">
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
</head>
<body>
 
</body>
</html>

חשוב שהקישור לגיליון העיצוב יקדים את הקישור ל-less.js

4. כדי שהרחבת LESS תעבוד כמו שצריך, חשוב לעבוד על שרת אינטרנט. לפיכך, כדאי שתעבדו על סביבת פיתוח on-line או על סביבת wamp או lamp על המחשב האישי.

כשמריצים את קוד ה-LESS, קוד ה- LESS.js מעבד את הקוד והופך אותו ל-CSS רגיל שהדפדפן יכול לעבוד איתו.

עכשיו, אחרי שהתקנו את הרחבת LESS בואו נכיר את התכונות העיקריות שהיא מציעה.

שימוש מחדש בערכים באמצעות משתנים

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

@variableName: value;

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

@darkColor: #009;
@lightColor: #FFF ;

body {   color: @darkColor;
}
h1,h2,h3 {
  color: @lightColor;
  background: @darkColor;
}

משתנה מחרוזת

משתנים לא חייבים להיות ערכים מספריים דוגמת px או %, או ערכים של צבעים, והם יכולים להיות גם מחרוזות. לדוגמה:

@baseUrl:"";

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

background-image:url("@{baseUrl}/images/LESS.png ");

שימו לב לעטיפה של שם המשתנה ב-{}@.

הורשה של כללים באמצעות mixins

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

לדוגמה:

ניצור מחלקה ששמה .roundCornerBox ונגדיר עבורה כללים.
כדי להשתמש בכללים שהגדרנו עבור המחלקה .roundCornerBox גם עבור האלמנטים: #header ו-#footer נעביר את המחלקה בתור אחד הכללים לאלמנטים.

כך נראה הקוד:

.roundCornerBox {
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  border: 1px solid black;
  text-align: center;
}

#header {
  .roundCornerBox;
}

#footer {
  .roundCornerBox;
  font-size: 90%;
}

העברת פרמטרים ל-mixin

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

.roundCornerBox (@rad, @borderColor){
  -moz-border-radius: @rad;
  -webkit-border-radius: @rad;
  border: 1px solid @borderColor;
}

#header {
  .roundCornerBox(25px, #f00);
  font-size: 200%;
}

#footer {
  .roundCornerBox(10px, #00f);
}

המקרה הכללי הוא של מחלקה ששמה .roundCornerBox שעבורה מוגדר משתנה ששמו @rad עבור התכונה border-radius, ומשתנה ששמו @borderColor שמגדיר את צבע הגבול של האלמנט. אחר-כך, המחלקה #header יורשת את המקרה הכללי, ומציבה לתוכו את הערכים 25px וצבע #f00. גם המחלקה #footerיורשת את אותו Mixin ומציבה לתוכו ערכים שונים.

כללים מקוננים (Nested rules)

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

.summary {color: black;}
.summary h1{ background: green; font-size:200%;}
.summary h2 {background: yellow;}
.summary h2 a {text-decoration: none;}
.summary h2 a:hover {text-decoration: underline;}

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

.summary { color: black;
h1 { background: green; font-size:200%;}

h2{ background: yellow;
    a { text-decoration: none;
    &:hover { text-decoration: underline;
      }
    }
}
}

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

&:hover { text-decoration: underline;}

משמעות הסימן & היא שלא להכניס רווח בין :hover ובין הסלקטור הקודם (a). הודות לכך, נקבל a:hover, ונוכל לראות את האפקט הרצוי. תכונה זו מועילה כשאנחנו רוצים להשתמש בפסאודו-קלאס דוגמת :hover או כשאנחנו רוצים לתת שם לאלמנט (לדוגמה, div.div-name).

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

אופרטורים של LESS מאפשרים להשתמש בארבע פעולות החשבון הבסיסיות. + , - , / , *. לדוגמה: אם ברצוננו להגדיר גודל לכותרת ראשית h1, ולגזור מגודל זה את גודלן של שאר הכותרות, נוכל להשתמש באופרטורים.

@h1Size: 24px;
h1 {font-size: @h1Size;}
h2 {font-size: @h1Size*0.67;}
h3 {font-size: @h1Size*0.50;}

מכירים את זה שבכל פעם שאתם מוסיפים padding או כשמוסיפים רוחב border, הם מוסיפים לממדי התיבה, ואז צריך להפחית את תוספת ה-padding וה-border מממדי האלמנט (רוחב וגובה). השימוש הבא באופרטורים של-LESS יכול לפתור את הבעיה:

.textBox (@boxWidth, @boxHeight, @boxPadding, @boxBorderWidth) {
width: @boxWidth - 2 * (@boxPadding + @boxBorderWidth);
height: @boxHeight - 2 * (@boxPadding + @boxBorderWidth);
border: @boxBorderWidth solid black;
padding: @boxPadding;
}

בדוגמה זו יצרנו מחלקה כללית textBox שיודעת לקבל ערכים עבור רוחב התיבה, גובהה, padding ורוחב ה-border, ולפצות עבור ה-padding ורוחב ה-border בתכונות ה-width וה-height של האלמנט. חשוב לשים לב שכל אחד מהאופרטורים מוקף ברווחים בודדים משני צדדיו. אחרת המינוס לא מזוהה על ידי המעבד של LESS.

פונקציות שמטפלות בצבע

כמה נחמד היה לבקש מגיליון ה-CSS להבהיר במידה מסוימת את צבע הכותרות, או לייצר מידה שונה של שקיפות עבור אלמנטים שונים. ובכן, LESS נותן לנו את מבוקשנו באמצעות סדרה של פונקציות שמטפלות בצבעם של אלמנטים. לדוגמה, ניתן ערך של צבע מסוים למשתנה @color, ונפעיל על ערך זה את פונקציות הצבע של LESS. השתמשתי ב-10%, אבל אפשר להשתמש במידה שאנחנו רוצים.

lighten(@color, 10%);

גורם לצבע בהיר יותר ב-10%.

darken(@color, 10%);

גורם לצבע כהה יותר ב-10%.

saturate(@color, 10%);

גורם לצבע רווי יותר ב-10%.

desaturate(@color, 10%);

מפחית את מידת הרוויה של הצבע.

fadein(@color, 10%);

גורם לצבע להיות שקוף יותר ב-10%.

fadeout(@color, 10%);

גורם לצבע להיות שקוף פחות ב-10%.

fade(@color, 10%);

גורם לשקיפות של 10% לצבע.

mix(@color1, @color2);

נותן את תוצר הערבוב של שני צבעים.

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

@color: #f00;
h1 { color: lighten(@color, 10%);}
h2 { color: lighten(@color, 20%);}
h3 { color: lighten(@color, 40%);}

כתיבת הערות בקבצי LESS

LESS מציע שני סוגים של הערות. הערה שמיועדת רק ל-LESS, והערה שתעבור קומפילציה ותראה גם בגרסת ה-CSS.

//LESS comment

זו שיטת הערה שתראה רק בקובץ LESS.

/*CSS comment*/

זו שיטת הערה שתראה ל-LESS וגם ל-CSS.

ייבוא קבצי LESS ו CSS

ניתן לייבא קבצי LESS או CSS קיימים לקובץ ה-LESS הנוכחי. הדרך להוסיף קובץ LESS:

@import"style.less";

הוספת קובץ LESS קיים מאפשרת להשתמש במשתנים וב-mixns של הקובץ style.less בקובץ החדש.

ניתן גם להוסיף קובץ CSS לקובץ LESS, וזאת באמצעות:

@import"style.css";

הפונקציה ()e

כאשר רוצים להשתמש בקוד-CSS לא סטנדרטי, מהסוג ש-LESS לא מבין, ורוצים למנוע קומפילציה של הקוד, עוטפים את הקוד במירכאות כפולות ומוסיפים ~ לפני. לדוגמה:

.class {filter: ~"ms:anUnusualSyntax.sTh()";}

התוצאה תהיה ש-LESS לא ישנה את מה שנמצא בתוך המירכאות, ויקרא זאת כך:

.class {filter: ms:anUnusualSyntax.sTh();}

השימוש ב-LESS באתר שנמצא באוויר

הקושי העיקרי ב-LESS הוא שנדרש דפדפן שבו JavaScript עובד, וזה לא תמיד המצב בחלק מהדפדפנים, בעיקר מסיבות אבטחה. הפתרון המומלץ ביותר הוא להשתמש ב-LESS בסביבת הפיתוח, ולחזור לגיליון CSS כשהאתר באוויר. לשם כך, לפני שאנחנו מעלים את האתר לאוויר, נריץ את האתר על הדפדפן, ונעתיק את קוד ה-CSS במלואו לגיליון עיצוב css רגיל. ב-Chrome, נעלה את כלי המפתחים (קליק ימני על הדף ובדוק מרכיב), בקונסולה של כלי המפתחים בוחרים ב-Resources, ואז בוחרים ב-stylesheet, ומעתיקים אותו. את הקוד המועתק מדביקים לתוך גיליון עיצוב CSS, וזה הגיליון שישמש את האתר באוויר.

לסיכום

השימוש ב-LESS יכול לייעל מאוד את הטמעת העיצוב באתר באמצעות CSS הודות לשימוש במשתנים ופונקציות, ושאר קונסטרקטים שמוכרים לנו מעולם התכנות. ל-LESS יש עוד הרבה מה להציע, והכול מוסבר היטב בדוקומנטציה באתר lesscss.org.

לכל מדריכי ה-CSS

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

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

נכתב ע"י יוסי בן הרוש

מתכנת אתרי אינטרנט, מומחה Laravel ו-Angular, והכותב של כל התכנים ב רשתטק תכנות אתרי אינטרנט

לכל המדריכים >>

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

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

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

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

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