lesscss

להוציא יותר מה- CSS באמצעות LESS

מה זה 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);
}

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

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

אהבתם? שתפו את החברים!

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

קראו עוד

לתגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *