LESS CSS - מדריך למתחילים

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

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

המהדר

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

הנה הצצה בקוד LESS:

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; צבע: @ color-base;  

המהדר יעבד את הקוד ויעביר תחביר LESS לתבנית CSS תואמת דפדפן:

 .class1 background-color: # 2d5e8b;  .class1 .class2 background-color: #fff; צבע: # 2d5e8b;  

קיימים מספר כלים להרכבת CSS:

שימוש ב- JavaScript

LESS מגיע עם פחות.ג'ים קובץ שהוא ממש קל לפריסה באתר האינטרנט שלך. צור גיליון סגנונות עם .פחות הרחבה ולקשר אותו במסמך באמצעות rel = "stylesheet / less" תכונה.

אתה יכול לקבל את הקובץ JS כאן, להוריד אותו באמצעות מנהל החבילה Bower, אחר ישירות קישור CDN, כך:

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

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

שימוש ב- CLI

LESS מספק ממשק שורת פקודה מקומית (CLI), פחות, אשר מטפל מספר משימות מעבר רק קומפילציה תחביר LESS. באמצעות CLI אנו יכולים מוך את הקודים, לדחוס את הקבצים, וליצור מפת מקור. הפקודה מבוססת על Node.js שמאפשרת למעשה את הפקודה לעבוד על פני Windows, OS X ו- Linux.

ודא Node.js הותקן (אחרת לתפוס את ההתקנה כאן), ולאחר מכן להתקין CL CLI דרך NPM (צומת חבילת מנהל) באמצעות שורת הפקודה הבאה.

 npm להתקין -g פחות 

עכשיו יש לך את פחות הפקודה לרשותך כדי לקמפל LESS לתוך CSS:

 style.css 

באמצעות רץ המשימות

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

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

• כיצד להשתמש Grunt כדי להפוך את זרימת העבודה שלך
• תחילת העבודה עם Gulp.js
• הקרב על בניית סקריפטים: Gulp Vs Grunt

שימוש ביישום גרפי

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

הנה הרשימה המלאה:

App	פלטפורמה	עלות
תערובת	OS X / Windows	חופשי
קואלה	OS X / Windows / לינוקס	חופשי
Prepros	OS X / Windows	פרימיום (USD 29)
WinLESS	Windows	חופשי
קוד	OS X	USD32

איזה מהדר אתה בוחר (מלבד JavaScript) לא ממש משנה, בכנות, כל עוד הכלי פועל ומשלים את זרימת העבודה שלך, ללכת על זה.

עורך הקוד

ניתן להשתמש בכל עורך קוד. כל שעליך לעשות הוא להתקין תוסף או הרחבה כדי להדגיש תחביר LESS עם צבעים מתאימים, תכונה אשר זמין כעת עבור כמעט כל עורכי קוד IDEs כולל SublimeText, Notepad + +, VisualStudio, TextMate, ו Eclipse עד כמה שם.

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

תחביר LESS

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

משתנים

קודם כל, בואו נסתכל על משתנים.

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

 .class1 background-color: # 2d5e8b;  .class2 background-color: #fff; צבע: # 2d5e8b;  .class3 border: 1px solid # 2d5e8b;  

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

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

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base;  .class2 background-color: #fff; צבע: @ color-base;  .class3 border: 1px solid @ color-base;  

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

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

 @ font-family: Georgia @ dot-border: dotted @transition: linear @opacity: 0.5 

מיקסים

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

 .הדרגתיים background: #eaeaea; רקע: שיפוע לינארי (top, #eaeaea, #cccccc); רקע: -o-linear-gradient (למעלה, #eaeaea, #cccccc); background: -ms-linear-gradient (למעלה, #eaeaea, #cccccc); background: -moz-linear-gradient (למעלה, #eaeaea, #cccccc); רקע: -webkit-linear-gradient (למעלה, #eaeaea, #cccccc);  

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

 div .gradients; border: 1px solid # 555; border-radius: 3px;  

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

 div background: #eaeaea; רקע: שיפוע לינארי (top, #eaeaea, #cccccc); רקע: -o-linear-gradient (למעלה, #eaeaea, #cccccc); background: -ms-linear-gradient (למעלה, #eaeaea, #cccccc); background: -moz-linear-gradient (למעלה, #eaeaea, #cccccc); רקע: -webkit-linear-gradient (למעלה, #eaeaea, #cccccc); border: 1px solid # 555; border-radius: 3px;  

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

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

 @import "אלמנטים"; 

עכשיו אנחנו יכולים לעשות שימוש חוזר בכל שיעורים מסופק על ידי אלמנטים, לדוגמה, כדי להוסיף 3px הגבול לרדיוס הגבול a div, אנחנו יכולים לכתוב:

 div .rounded (3px);  

לשימוש נוסף, עיין בתיעוד הרשמי.

כללים מקוננים

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

 nav height: 40px; רוחב: 100%; רקע: # 455868; border-bottom: 2px solid # 283744;  nav li width: 600px; גובה: 40px;  nav li a color: #fff; line-height: 40px; טקסט בצל: 1px 1px 0px # 283744;  

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

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

 nav height: 40px; רוחב: 100%; רקע: # 455868; border-bottom: 2px solid # 283744; li width: 600px; גובה: 40px; a color: #fff; line-height: 40px; טקסט בצל: 1px 1px 0px # 283744;  

ניתן גם להקצות כיתות פסאודו, כמו : רחף, אל בורר באמצעות סימן אמפרסנד (&).

נניח שאנחנו רוצים להוסיף : רחף כדי תג עוגן לעיל, אנחנו יכולים לכתוב את זה ככה:

 a color: #fff; line-height: 40px; טקסט בצל: 1px 1px 0px # 283744; &: רחף background-color: # 000; צבע: #fff;  

פעולה

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

נניח שאנו רוצים שהאלמנט B יהיה גבוה פי שניים מאלמנט A. במקרה זה, נוכל לכתוב זאת כך:

 @height: 100px .element-A height: @height;  .element-B height: @height * 2;  

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

ב אלמנט B, במקום לחשב את גובה עצמנו, אנו יכולים להכפיל את הגובה ב -2 באמצעות מפעיל הכוכבית (*). עכשיו, בכל פעם שאנחנו לשנות את הערך ב @height משתנה, רכיב ב תמיד יהיו בגובה כפול.

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

היקף

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

 כותרת @color: black; צבע רקע: @ color; nav @color: blue; צבע רקע: @ color; a color: @color;  

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

מחשבה סופית

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

הנה כמה מדריכים שאני ממליץ לך להסתכל לתוך טיפים נוספים ושיטות, אשר יכול לעזור לדחוף את מיומנות LESS שלך עד לשלב הבא.

• מדריך CSS: עיצוב סרגל ניווט חלקלק
• הבנת LESS פונקציות צבע
• 3 חדש תכונות CSS פחות אתה צריך לדעת