מה זה LESS?

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

שימוש במשתנים

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

/* Compiled CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
/* // LESS
@color: #4D926F;
#header {
  color: @color;
}
h2 {
  color: @color;
}

שימוש ב-mixins

MIXINS מאפשרים להוריש את כל התכונות של Class אחד ל-Class אחר, פשוט ע"י כתיבת השם שלו (ראה דוגמא). כמו כן הם יכולים לשמש כמו פונקציות שאפשר להעביר להם פרמטרים , כמו בדוגמא הבאה:

/* Compiled CSS */
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
// LESS
.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

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

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