29 באוג׳ 2012

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

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

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

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



ראה דוגמא:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>


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

אז מה בעצם נותנת לנו ספריית Less

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

דוגמא למימוש:
השמת משתנה
@commonLink: blue;
קריאה למשתנה בקוד ה Less
.commonLink{
     color: @commonLink;
}

  • חשוב לציין שניתן לקרוא למשתנה במספר מקומות בלתי מוגבל ובכל STYLE שנרצה להשתמש. לדוגמא, נוכל להשתמש במשתנה בדוגמא האחרונה במקום אחר בקובץ ה LESS שלנו על עיצוב שישפיע על צבע הרקע לדוגמא ועל דווקא צבע טקסט.
  • בנוסף ניתן לבצע מניפולציות על משתנים, להכהות להבהיר צבע, ראה מידע נוסף האתר lesscss.
2. קינון אלמנטים - מאפשר לנו לסדר את הגדרות העיצוב בצורה חכמה שיאפשר לנו להבין את ההירכיה, ולמנוע שיכפול קוד.
דוגמא לקוד CSS רגיל:
.cube-tags .cube-content{text-align: justify;}
.cube-tags .cube-content  a{line-height:23px;padding: 0 5px;   text-decoration: none;}
.cube-tags .cube-content  a:hover{   text-decoration: underline;}

הבעיה היא  שיש מספר רמות וכדי לפנות לרמה מסויימת אנו נאלצים לשכפל את כל הנתיב עד להגעה לאלמנט, ומקשה על הבנה ותיחזוק הקוד.
דוגמא לאותו קטע קוד ב LESS:
.cube-tags {
        .cube-content{
                   text-align: justify;
                   a{
                         line-height:23px;padding: 0 5px;   text-decoration: none;
                         &:hover{   text-decoration: underline;}
                   }
        }
}
  • הקוד החדש מבהיר לנו בצורה ברורה עכשיו את הירכית האלמנטים, "מה מושפע ממה". ובנוסף בכל פעם שנרצה להוסיף עיצוב לאלמנט בהירכיה מסויימת לא נצטרך לשכפל את כל הנתיב.
  • & עם הפסאדו קלאס hover, מציין שעל אותו אלמנט שעליו מצורף ה STYLE, במצב hover, יתווסף עיצוב נוסף. ניתן להשתמש בצורת כתיבה הזאת גם לclassים אחים, הסעיף הבא בהרחבה.
3. אלמנטים אחים ומימוש ליצירת Layouts -  

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

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

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


דוגמא:
<div class="common-starcture blue"> site content </div>


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

ישום ב CSS רגיל:
.common-starcture.green nav{}
.common-starcture.green .sep-border{}
.common-starcture.green .common-side-menu  a{   }
.common-starcture.green .common-side-menu a.selected,
.common-starcture.green .common-side-menu  a:hover{   }
.common-starcture.green h2.commonHeader{}

.common-starcture.blue nav{}
.common-starcture.blue .sep-border{}
.common-starcture.blue .common-side-menu  a{   }
.common-starcture.blue .common-side-menu a.selected,
.common-starcture.blue .common-side-menu  a:hover{   }
.common-starcture.blue h2.commonHeader{}



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

ישום ב LESS:
.common-structure{
&.green{    
               nav{}
               .sep-border{}
               .common-side-menu  a{   }
               h2.commonHeader{}
        }
&.blue{      

               nav{}
               .sep-border{}
               .common-side-menu  a{   }
               h2.commonHeader{}
        }
&. purple{  

               nav{}
               .sep-border{}
               .common-side-menu  a{   }
               h2.commonHeader{}
       }
}

  • ה & מציין שמדובר ב Class שמצורף ל Class שבוא הוא נמצא, במקרה שלנו ל common-structure., הדבר מונע שכפול של קוד, וכתיבה ברורה יותר. בכל גוף של צבע נוכל לדרוס את הפרמטרים אותם אנחנו מעוניינים לדרוס.
  • עדיין במקרה מהסוג הזה נאלץ לבצע את אותם דריסות רק עם ערכים דומים, מה שעדיין יוצר לנו שכפול קוד, את הפיתרון לדבר הזה ניצור ע"י שימוש בפונקציות Less, ועל כך מדבר הסעיף הבא.
4. פונקציות Less  - מאפשרת לנו להכיל עיצוב עם אותם styles, רק עם פרמטרים שונים.
מוגדרים ב less בשם MIXINS
Syntax:
.functionName(@param1 , @param2 ,@param3:"InitializParam"){
        a{color:@param1;}
        div{background-color:@param2;}
        h2{border-color:@param3;}
InitializParam - ערך דיפולטי שניתן לאתחל את הערך/ים שמעבירים לפונקציה.
* במידה ונקרא לפונקציה שקיים לה ערך דיפולטיבי מבלי לאתחל את הערך עם פרמטר, אז הערך הדיפולטי יחול עליו.

Syntax - קריאה לפונקציה + דוגמא למימוש:
.common-structure{
&.green{    
               .functionName("green","#700452","lightgreen");
        }
&.blue{      
               .functionName("blue","#300452","lightgblue");
        }
&. purple{  
              .functionName("purple","#300452");
       }
}

  • היתרונות ברורים, הפונקציה  חסכה  לנו לשכפל כתיבה של 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
#Cubes{
יצירת object בתוך ה namespace
     .cube(){
            styles of object....
     }
     .cube-box(){
פה ניצור object נוסף אשר ירוש מה object הראשון שיצרנו cube
עם תוספות ודריסות עיצובים משלו
           #Cubes>.cube;/*inherit from cube*/
           more styles of object includes overides....
     }
}

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

דוגמא: ירושה ב class קיים מobject שיצרנו מקודם.
.cube-news{
      #Cubes>.cube;/*get styles of object cube*/
  more styles of class , includes overides of class....
}
ירושה ב class שיורש מ object שיורש מ object אחר
.cube-news{
      #Cubes>.cube-box;/*get styles of object cube-box that inherit from cube*/
     more styles of class , includes overides of class....
}
6. מיחזור styles (סוג של פונקציה ללא פרמטרים) - אפשרות פשוטה שמקנה לנו להשתמש ב styles שקיימים ברמה אחת, דומה לירושה.

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

.class1{
     color:red;border:solid 1px red;
     a{color:blue;}
}
.class2{
     class1;
     a{background-color:blue;}
}

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