Less – ספריית CSS , על רגל אחת

Less - היא סוג של ספריית CSS, שמקנה ל Styles של ה CSS להתנהג בצורה יותר חכמה.

הפעלת הספריה פועלת ע”י הוספת קובץ JS אשר ירנדר לנו בצורה דינאמית את ה CSS ה”חכם” שלנו לקובץ CSS טיפש שהדפדפן מכיר.

הפעלת הספרייה מאוד פשוטה, יצירת קובץ less שיושפע לנו ויהפוך אוטומטית לקובץ CSS, וע”י שיוך קובץ ה JS של הספרייה לתגית ה HEAD באתר.

ראה דוגמא:

לאתר Less והורדת קובץ הספרייה

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

דוגמא למימוש:
השמת משתנה:

קריאה למשתנה בקוד ה Less:

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

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

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

– הקוד החדש מבהיר לנו בצורה ברורה עכשיו את הירכית האלמנטים, “מה מושפע ממה”. ובנוסף בכל פעם שנרצה להוסיף עיצוב לאלמנט בהירכיה מסויימת לא נצטרך לשכפל את כל הנתיב.
– & עם הפסאדו קלאס hover, מציין שעל אותו אלמנט שעליו מצורף ה STYLE, במצב hover, יתווסף עיצוב נוסף. ניתן להשתמש בצורת כתיבה הזאת גם לclassים אחים, הסעיף הבא בהרחבה.

3. אלמנטים אחים ומימוש ליצירת Layouts

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

הפיתרון: ישום מעטפת כללית לאתר, איזה DIV אלמנט שעוטף את כל האתר, וניתן לו לדוגמא Class בשם
common-starcture.

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

דוגמא:

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

ישום ב CSS רגיל:

בכתיבה ב less אנחנו בעצם פונים באמצעות class האבא שיצרנו לכל מקום באתר שבו אנחנו רוצים לשנות צבע/הגדרה, בהתאם ל layout החדש, ראו צורת כתיבה בless…

ישום ב LESS:

– ה & מציין שמדובר ב Class שמצורף ל Class שבוא הוא נמצא, במקרה שלנו ל common-structure., הדבר מונע שכפול של קוד, וכתיבה ברורה יותר. בכל גוף של צבע נוכל לדרוס את הפרמטרים אותם אנחנו מעוניינים לדרוס.
– עדיין במקרה מהסוג הזה נאלץ לבצע את אותם דריסות רק עם ערכים דומים, מה שעדיין יוצר לנו שכפול קוד, את הפיתרון לדבר הזה ניצור ע”י שימוש בפונקציות Less, ועל כך מדבר הסעיף הבא.

4. פונקציות Less – מאפשרת לנו להכיל עיצוב עם אותם styles, רק עם פרמטרים שונים.
מוגדרים ב less בשם MIXINS.

דוגמא:

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

Syntax – קריאה לפונקציה + דוגמא למימוש:

– היתרונות ברורים, הפונקציה חסכה לנו לשכפל כתיבה של styles לתגיות a , div , h2, ומשאירה לנו רק את הצורך בכתיבה של הערכים אותם נרצה להכיל על האלמנטים אלו. וע”י כך הימנעות משכפול קוד, ותחזוקה קלה לקובץ ה styles שלנו.

5. Object of CSS – מוגדר ב less בשם namespaces

– יצירת namespace נכתבת כמו פנייה בCSS לאלמנט ID, ע”י שימוש ב#, יש להיזהר מלערבב ביניהם, מבחינה טכנית אפשר לשים CSS באלמנט הזה ולהשתמש בו גם לשימוש כאלמנט ID וגם כ namespace למטרות הורשה בלבד.
– יצירת objectים מקוננים בתוך ה namespace, ויכולים לקרוא / לרשת מ objectים אחרים, נכתבים כמו class ב css, עם תוספת של סוגריים עגולים לאחר שם ה “class”, ולאחריו יהיו הסוגריים המסולסלות שבתוכם יהיו הגדרות ה css של ה object.
– שימוש באובייקט נעשה ע”י קריאה במקום מסוים ב css ל namespace (נעשה עם שמו כולל ה #), לאחריו סימן גדול מ “>” ולאחריו שם ה object,ולסיום הסימון “;” .

syntax

יצרנו namespace עם object, כתיבתו לא עושה כלום עם לא נשתמש בו, או יותר נכון נקרא לobjectים שלו ב classים רגילים, אז הנה דוגמא לקריאה ושימוש ב object.

דוגמא: ירושה ב class קיים מobject שיצרנו מקודם.

ירושה ב class שיורש מ object שיורש מ object אחר

6. מיחזור styles (סוג של פונקציה ללא פרמטרים) – אפשרות פשוטה שמקנה לנו להשתמש ב styles שקיימים ברמה אחת, דומה לירושה.

דוגמא: יש לנו styles שכתבנו, ואני רוצה להשתמש בעיצובים של class1 ב class2, אז בצורה פשוטה אני כותב ב class2 את שם class1 ולאחריו “;”, עכשיו class2 כביכול יורש את העיצובים של class1, ראו דוגמא:

מילות מפתח: CSS , LESS , לימוד less , שפת less , ספריית css.

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

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

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">